- Browser Support
- CSS Animations
- The @Keyframes Rule
- animation-* Properties
- Animation Events
- Transition or Animation
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
The @Keyframes Rule
Keyframes are the different states of the element being animated. They’re used to specify different values for the properties being animated at various points during the animation. A series of keyframes defines the behavior for one cycle through the animation. Remember animations can repeat multiple times.
You define keyframes inside the @keyframes rule.
@keyframes identifier {
List of properties and values
}
An @keyframesrule begins with the @keyframes keyword followed by an identifier (the keyframe name). Inside the brackets is a list of CSS properties and values to set the style for the specific states.
Inside each @keyframes rule is a list of percent values or the keywords to and from. The keyword from is equivalent to 0%, and the keyword to is equivalent to 100%. When using a percent, the % sign needs to be included. 0 and 100 are invalid values; 0% and 100% are the correct values.
@Keyframes slide {
0% {
left: 0;
}
20% {
left: 100px;
}
40% {
left: 200px;
}
60% {
left: 300px;
}
80% {
left: 400px;
}
100% {
left: 500px;
}
}
This @keyframes rule could also be written as
@Keyframes slide {
from {
left: 0;
}
20% {
left: 100px;
}
40% {
left: 200px;
}
60% {
left: 300px;
}
80% {
left: 400px;
}
to {
left: 500px;
}
}
Each keyframe selector specifies the percentage of the animation’s duration that the specific keyframe represents. The keyframe state is specified by the group of properties and values declared on the selector.
If you don’t set a keyframe at 0% (or from), then the browser constructs a 0% state using the intrinsic values of the properties being animated. Similarly if no 100% (or to) keyframe is set, the browser constructs the state from intrinsic values. Negative percent values or values greater than 100% are ignored. Keyframes containing properties that aren’t animatable or contain invalid properties are ignored.
@keyframes rules don’t cascade. A single animation will never use keyframes from more than one @keyframes rule. When multiple @keyframes have been specified on the animation-name property, the last one in the list (ordered by time) with a matching @keyframes rule controls the animation.
It’s valid for an @keyframes rule to be empty, and because of this it can be used to hide keyframes previously defined. The empty @keyframes rule should come later in your CSS to override any @keyframes rule with the same identifier that appears earlier in your CSS.
Add the following after the @keyframes rules you set in Example 4.1.
@-webkit-keyframes slide { } @keyframes slide { }- Reload your webpage. The animation should no longer run, since an empty @keyframes rule is called.
- Remove the empty @keyframes rule or place it before the nonempty @keyframes rule, and the animation will run again.