Animation

We can change more than just the position, and we can change how the animation starts and stops:

Options for 'animation-timing-function' include 'ease-in', 'ease-out', 'ease-in-out', and 'linear':


#inside {

  position: absolute;

  top: 0;

  left: 0;

  height: 10px;

  width: 10px;

  background: red;

  animation: moveit 2s alternate infinite;

  animation-timing-function: linear;

}



@keyframes moveit {

  0% {top: 0; left: 0;}

  25% {top: 190px; left: 0}

  50% {top: 0px; left: 90px; height: 20px; width: 20px;}

  75% {top: 190px; left: 190px;}

  100% {top: 0px; left: 190px;}

}