CSS animation-name Property

The animation-name property in CSS is used for defining animations. It is used to specify the name of the @keyframes that describe the animation.

Understanding the Animation-Name Property

The animation-name property in CSS is used to connect an element to a set of keyframes. The keyframes describe the animation’s sequence of changes.

Syntax:

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

Property Value: The animation-name property value is listed below:

• keyframename: This property is used to specify the name of the keyframe which needs to bind with the selector.
• none: It is the default value. It is used to specify that there will be no animation.
• initial: This property is used to set this property to its default value.
• inherit: This property is used to inherit this property from its parent element.

Example: In this example, we are using the above-explained property.

Output:👁 Image
Supported Browser: The browser supported by animation-name property are listed below:

• Google Chrome 43.0 and above
• Edge 12.0 and above
• Firefox 16.0 and above
• Opera 30.0 and above
• Safari 9.0 and above