In this section, we will learn what the animation-name property is and how to use it in CSS.

Click here to run the example animation-name property.

CSS animation-name Property Definition and Usage

The CSS `animation-name` property is used to set the name of an animation that we want to apply to an element.

Note: This animation is created using @keyframes at rule.

CSS animation-name Property Syntax

animation-name: keyframename|none|initial|inherit;

CSS animation-name Property Value

• keyframe-animation: this is the name of the animation we want to apply to the target element.

Note: the two global values, “initial” and “inherit” values, can also be used for the value of this property.

The default value of this property is set to none, which means the target element doesn’t need an animation.

Example: animation-name property in CSS

See the Pen animation-name property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS animation-name property

See the Pen CSS animation-name property by Enjoy Tutorials (@enjoytutorials) on CodePen.