Webzstore
The CSS 'animation-name' property defines the name of the @keyframes animation that should be applied to an element. This property links the element with a set of styled animation steps defined within the @keyframes rule, specifying how an element should animate between styles.
CSS 'animation-name' Property Examples
See the Pen CSS 'animation-name' Property by Webzstore (@webzstore) on CodePen.
The 'animation-name' property is a foundational aspect of CSS animations, connecting HTML elements with the stylized animations defined in @keyframes. Developers can create visually dynamic and interactive web pages by specifying the name of an animation.
Browser Support For 'animation-name' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 43 | May 2015 |
| Edge | 12 | Jul 2015 |
| Firefox | 16 | Oct 2012 |
| Safari | 9 | Sep 2015 |
| Opera | 30 | Jun 2015 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation-name for the full compatibility details, including mobile browsers.
CSS Syntax of the 'animation-name' Property
animation-name: none | <keyframes-name>;
Usage of the 'animation-name' Property
Use 'animation-name' when applying a predefined @keyframes animation to an element. This is the first step in setting up CSS animations, as it establishes which set of keyframes (i.e., steps or stages) the animation should follow. It's beneficial for applying complex animations that involve multiple style changes over time.
Property Values of the 'animation-name' Property
- None: The default value. Indicates that no animation should be applied.
- <keyframes-name>: The name of a @keyframes animation that defines the stages of the animation. This name is used to link the element to the corresponding @keyframes rule where the animation is defined.
