Animation property
The CSS animation property is a shorthand property for configuring one or more animations on an element.
Tiny CSS Projects
The CSS animation property is a shorthand property for configuring an element's animation name, timing, duration, iteration, and related behavior.
- How it is used
- Configures a repeating CSS loading indicator that shows a task is still running.
- How deep it goes
- Works through named keyframes, duration, repetition, shorthand defaults, and staggered delays; does not detail every animation setting.
- Examples
- Uses shrinking SVG rectangles, the `animation: doScale 2.2s infinite` declaration, and a reduced-motion override.
- What you can do after
- Build it from scratch: apply a repeating keyframe animation to a loader, stagger its elements, and disable motion conditionally.
CSS in Depth, Second Edition
The CSS animation property is a shorthand property for configuring one or more animations on an element.
- How it is used
- Applies named keyframe animations to elements while configuring duration, timing, and repetition.
- How deep it goes
- Defines four shorthand components and notes fill mode, but does not enumerate every animation subproperty.
- Examples
- Uses a 100px green box that changes color and position, runs 1.5 seconds, and repeats three times.
- What you can do after
- Apply a named @keyframes animation with shorthand values for duration, timing, and iteration count.
Read how CSS in Depth, Second Edition explains animation property →
Related concepts
- keyframes at-ruleuses · The CSS @keyframes at-rule defines an animation’s keyframes, specifying animated property values at points along its timeline.
- transitionalternative to · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- animation-iteration-countuses · The CSS animation-iteration-count property specifies how many times an animation cycle repeats.
- animation durationuses · The CSS animation-duration property specifies how long one cycle of an animation takes.
- flipping-over effectuses · A flipping-over effect is a visual interaction in which a card or other interface element appears to rotate from one side to the other.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.