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
 |  |  |  |  |
| 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 43.0 4.0 -webkit- | 10.0 | 30.0 15.0 -webkit- 12.0 -o- |
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.
Leave a Reply