Keyframes at-rule
The CSS @keyframes at-rule defines an animation’s keyframes, specifying animated property values at points along its timeline.
CSS in Depth, Second Edition
A CSS keyframe is a stage in an animation timeline containing declarations for the animated properties at a specified progress point.
- How it is used
- Defines multi-stage motion when a two-state transition cannot describe the desired path or return to the starting point.
- How deep it goes
- Works through percentage selectors, property declarations, interpolation, shorthand application, and grouped keyframes without descending into browser implementation internals.
- Examples
- Uses a moving, color-changing box, a 3D card fly-in, and a shaking Save button.
- What you can do after
- Build it from scratch by defining percentage keyframes and applying the named animation to an element.
Read how CSS in Depth, Second Edition explains keyframes at-rule →
Tiny CSS Projects
A CSS keyframe is a point in an animation sequence that specifies styles at a particular progress position.
- How it is used
- Defines changing styles for animated SVG rectangles in a loading indicator.
- How deep it goes
- Explains named @keyframes syntax, percentage steps, browser in-betweening, and animation-name, then works through color, shape, and scaling examples.
- Examples
- Shows background-color and border-radius animations on a div, then vertical scaling that squeezes and expands an SVG rectangle.
- What you can do after
- Build it from scratch with CSS by defining named keyframes, applying them to SVG rectangles, and staggering their start times.
WordPress Power Toolkit: Harness AI to build next-level websites
A keyframe is a specified state or time point in an animation sequence that defines values such as position, rotation, or scale.
- How it is used
- Defines staged, repeatable CSS movement and effects when a simple state change is not enough.
- How deep it goes
- Explains key moments, automatic interpolation, looping, and timing control without detailing keyframe syntax.
- Examples
- Uses rotation, position, scale, looping movement, and Inspector timeline controls as concrete examples.
- What you can do after
- Diagnose animation behavior with Inspector timelines and design smoother multi-stage effects using keyframe-based animation.
Related concepts
- transitioncontrasts with · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- animation propertyused by · The CSS animation property is a shorthand property for configuring one or more animations on an element.
- animation nameconfigured by · The CSS animation-name property specifies the names of animations defined by @keyframes rules.
- animation-iteration-countconfigured by · The CSS animation-iteration-count property specifies how many times an animation cycle repeats.
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.