Creating an animation

CSS3 provides another, more feature-rich mechanism for creating animations. With CSS transitions, you can only animate from one set of CSS properties to another. CSS3 animations let you animate from one set of properties to another set to another set and so on. It allows you to control each step of an animation via keyframes. In addition, you can have an animation repeat, pause when a visitor mouses over it, and even reverse itself once the animation reaches its end.

Steps in creating an animation
1. Define the animation. This involves setting up keyframes that list the CSS properties to animate.
2. Apply the animation to an element. Once defined, you can apply the animation to any number of elements on a page. You can even set up separate timings, delays, and other animation properties for each element. So you can use the same animation with slightly different settings multiple times on a page.