Quick note about CSS animation
CSS3 animation lets an element gradually change from one style to another.
@keyframesto define an animation.
- Set this animation on an element with animation properties
We could set properties one-by-one or with following shorthand:
It defines what the animation looks like at each stage of the animation timeline. It is composed of:
- Name of the animation. For example, changeColor.
- Stages: From 0% to 100% to represent the whole process of animation
- CSS Properties: The CSS properties defined for each stage of the animation timeline.
Following example creates an animation called
changeColor and assign it to
In above example, we could also use
It has following properties:
The name of the animation, defined in the @keyframes.
The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).
The speed curve or pace of the animation:
|linear||The animation has the same speed from start to end|
|ease||Default value. The animation has a slow start, then fast, before it ends slowly.|
|ease-in||Start slowly and end fast.|
|ease-out||Start more quickly than linear ones and end slowly. The opposite of ease-in.|
|ease-in-out||Both a slow start and a slow end|
|initial||Sets this property to its default value. So
|inherit||Inherits this property from its parent element.|
Check The basics of easing for details.
It specifies when the animation will start. The value is defined in seconds (s) or milliseconds (mil).
It specifies the number of times that the animation will play. The possible values are:
- a specific number of iterations (default is 1)
infinite- repeats forever
It specifies whether the animation should play forward, reverse, or in alternate cycles.
normal- Default. On each cycle the animation resets to the beginning state (0%) and plays forward again (to 100%).
reverse- On each cycle the animation resets to the end state (100%) and plays backwards (to 0%).
alternate- On each odd cycle, the animation plays forward (0% to 100%). On each even cycle, the animation plays backwards (100% to 0%).
alternate-reverse- On each odd cycle, the animation plays in reverse (100% to 0%). On each even cycle, the animation plays forward (0% or 100%).
It specifies if the animation styles are visible before or after the animation plays.
normal- Default. The animation does not apply any styles to the element, before or after the animation.
forwards- After the animation is finished, the styles defined in the final keyframe (100%) are retained by the element.
backwards- Before the animation (during the animation delay), the styles of the initial keyframe (0%) are applied to the element.
It specifies whether the animation is
paused. Resuming a paused animation starts the animation where it was left off. But if pause an animation, the element style will return back to its origin.
Add multiple animations to a selector with comma: