In This Lesson You Will Learn
Unlike with transitions, there is absolutely no need for an event (e.g. hover) to trigger CSS animations. They can start all by themselves and be played indefinitely.
They operate according to a simple principle. With CSS animations , CSS properties are changed over time. This means, for instance, that you can animate the opacity property to fade an element in or out, or you can change the left or right properties of an absolutely positioned element, to move it horizontally across the webpage.
In the same way as in other animation programs (e.g. Flash), you do not need — as in the case, for instance, of a flick book or a traditional stop-motion animation (animated film) — to specify each individual step of the movement being performed, but you only define the moments in the course of the animation when something is meant to change. In the simplest scenario, these moments are the start and end points of the animation. The intermediate steps are calculated automatically by the browser.
Here is an example. You want an element to move across the page from left to right. In this case, all you need to do is specify the start and end positions of the element, and the intermediate steps will be calculated automatically. We also call this automatic calculation of the intermediate steps tweening (from between). The manually defined start and end points of the animation are called keyframes.
Therefore, to create an animation in CSS, you use keyframes. You use keyframes to define which property is to be changed at which time.