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;}
}

Further reading: the transform property