The @keyframes at-rule is the mechanism in CSS for describing an animation as a sequence of visual states over time. Rather than applying a single transition between two states, it lets an author define multiple distinct moments (key states) that an element should pass through. Those named sequences are stored in the stylesheet and can be referenced elsewhere to drive an element’s animated behavior.

Internally, a keyframes sequence specifies snapshots of an element’s presentation and the browser interpolates the intermediate frames between those snapshots as the animation runs. This interpolation is handled by the rendering engine and can affect any animatable aspect of an element’s presentation. Because the rule defines discrete points in an animation timeline, it gives precise control over the progression, allowing complex motion, staged reveals, and synchronized multi-step visual changes without scripting each intermediate step.

From a performance and rendering perspective, well-designed keyframes can be very efficient: the engine can optimize animation work, promote layers, and offload compositing to the GPU when appropriate. That said, which properties you animate matters for smoothness and power consumption. Designers commonly put transformations and opacity changes into keyframes for better compositing behavior, and avoid animating layout-triggering properties when possible to reduce layout and paint work.

In practical authoring, keyframes are useful for creating reusable named animation patterns, coordinating multiple elements, and encapsulating complex motion into maintainable blocks. They also interact with the broader document cascade and can be overridden or composed through stylesheet rules. Finally, when using keyframes it’s important to consider accessibility: provide respectful defaults or ways to honor user preferences for reduced motion so that animations enhance rather than hinder the user experience.

@keyframes <keyframes-name> {
  <keyframe-block-list>
}
where 
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+
where 
<keyframe-block> = <keyframe-selector># {
  <declaration-list>
}
where 
<keyframe-selector> = from | to | <percentage>

• <custom-ident>A name identifying the keyframe list. This must match the identifier production in CSS syntax.
• fromA starting offset of 0%.
• toAn ending offset of 100%.
• <percentage>A percentage of the time through the animation sequence at which the specified keyframe should occur.

The following information will show you the current browser support for the CSS at-rule @keyframes. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile