`animation-name` connects an element to a named `@keyframes` definition. The names must match: `@keyframes doScale` is applied with `animation-name: doScale`. Keyframes describe the important changes; the browser fills in the states between them. section 3.4.1
Make a rectangle squeeze
```css @keyframes doScale { from { transform: scaleY(1); } 50% { transform: scaleY(0.2); } to { transform: scaleY(1); } } rect { animation-name: doScale; animation-duration: 2.2s; animation-iteration-count: infinite; } ``` The rectangle shrinks vertically halfway through each run, then returns to full height. `animation-name` selects the keyframes; duration and iteration count control how the animation runs. section 3.4.1 section 3.4.4
You can apply more than one animation by separating names with commas, such as `animation-name: changeColor, changeBorderRadius;`. For several rectangles using the same animation, give each a different `animation-delay` to stagger their movement rather than having them squeeze in sync. section 3.4.1 section 3.4
For a shorter rule, the `animation` shorthand can combine the name with other settings: `animation: doScale 2.2s infinite;`. Writing the properties separately is also valid. section 3.4.4
