The CSS animation property is shorthand for applying a named @keyframes animation to an element. It can set the animation name, duration, timing function, and iteration count in one declaration. section 17.1 section 17.7
Animating a box
Define over-and-back with keyframes at 0%, 50%, and 100%. Then apply it with .box { animation: over-and-back 1.5s linear 3; }. A 100px green box changes color and position, moves right, returns to its starting position, and stops after three repetitions. section 17.1
Listing 17.3 Applying the animation to the box
.box {
width: 100px; #1
height: 100px; #1
background-color: green;
animation: over-and-back 1.5s linear 3; #2
}
Inspect the compact declaration and connect each value to the animation’s name, duration, timing, and repetition behavior. section 17.1
Use the property with these principles:
- Pair it with a matching @keyframes name; keyframes define the changing states, while animation applies them. section 17.1
- Leave a property out of an intermediate keyframe when smooth interpolation between surrounding values is desired. section 17.1
- Use animation-fill-mode when the first or last animation frame should remain applied before or after playback. section 17.7
