Most often you can see transitions used on hover states, or when information on a page is added or removed. The hover states may be a subtle change in font color and information on the page may fade from invisible to visible.
CSS Animations are a more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state.
Where a transition goes only from A to B, the animation can go from A, B, C to D. Or any number of stages as needed. (To see the basics of CSS Animations click here.)
What is a CSS Animation?
An animation lets an element gradually change from one style to another one. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation.
Note: The animation will finish in 4 seconds. It will gradually change the background color of the <div> element from “green” to “yellow”. After the animation, the square changes back to its original color.
Click on the square to repeat the animation.
The animation-durationproperty defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0 seconds.
The following example will change the background and the position of the <div> element when the animation is 50% complete, and again when the animation is 100% complete:
The animation-direction property specifies whether the animation should be played forward, backward, or in alternate cycles.
The animation-direction property can have the following values:
normal (default) – the animation is played as normal (forward). reverse – the animation is played in the reverse direction (backward). alternate – the animation is played in forward first, then backward. alternate-reverse – the animation is played backward first, then forward.