/*
  Animation timing functions
  * ease: Slow start, then fast, then end slowly (default)
  * linear: The same speed from start to end
  * ease-in: With a slow start
  * ease-out: With a slow end
  * ease-in-out: With a slow start and end
  * cubic-bezier(n,n,n,n): Lets you define your own values in a cubic-bezier function
*/

.myDiv1{

  /* [name] [duration] [timing function] [delay] [repeate count e.g. 1 or infinite] [reverse with alternate] */
  animation: anim-1 5s ease-in-out 2s 5 alternate-reverse;

  background-color: black;
  height: 100px;
  width: 100px;
  position: relative;
}

.myDiv2 {
  animation-name: anim-2;
  animation-delay: 1s;
  animation-duration: 3s;
  animation-iteration-count: 5;
  animation-direction: reverse;
  animation-timing-function: linear;

  position: absolute;
  background-color: green;
  top: 110px;
  height: 50px;
  width: 50px;
}

@keyFrames anim-1 {
  0% {
    background-color: red;
    top:0px;
    left:0px;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: blue;
    top: 30px;
    left: 200px;
  }
}

@keyFrames anim-2 {
  from {width: 0px;}
  to {width: 150px;}
}