Animations describe how to execute multiple stage transition between states over time.
In this demo you can choose the animation code from the selection list on the left, or you can write your own in the CSS Code window. The chosen animation is applied to the ball in the middle of the display (on the right).
Hover the ball and see the animation defined in the CSS code of the selection.
Try to write a shorthand for all properties in each selection. Help yourself with the commented one.
Add more animations. For example, rotation, scaling, moving to other sides, ...
Important: If you write your own animation @keyframes, write'/* end of keyframes */' at the end (as you can see in the code examples).
Question: In the 'Multiple' selection, why the ball is blue all the time after some time?
Answer: Color change animations is repeated 5 times. At the last animation the ball final color is blue. Since the fill mode is forwards, it remains its color after the color animation is completed. Jump animation continious, since it is defined as infinite.