Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)
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.
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. 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.CSS 'animation-name' Property Examples
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
Property Values of the 'animation-name' Property
"*" indicates required fields