CSS animation-name
property specifies the name of the @keyframes which is used to animate the specified element.
You can specify one or more keyframe names at a time. Multiple keyframe names must be comma-separated. If no keyframe name is specified, the animation is not applied to the element. See implementation in the example given below:
Example:
div{ animation-name: moveRight; }
Separate each keyframe name with a comma while specifying multiple keyframe names. See implementation in the below example:
Example:
div{ animation-name: moveRight, changeBackground; }
Always specify the animation-duration
property whenever using the animation-name
property. Otherwise, the animation duration remains 0s and the animation is not played at all.
CSS Syntax
The animation-name
property has the following syntax:
animation-name: none|keyFrameName|initial|inherit;
Property Values
The animation-name
property accepts the following values:
none | Specify no animation. This is the default value. |
keyFrameName | Specify a keyframe name that is to be applied to the element. Multiple keyframe names must be comma-separated. |
initial | Sets the animation-name property to its default value(none). |
inherit | Inherits the animation-name property from the parent element. |
General Info
Default Value | none |
Inherited | No |
JavaScript Usage | element.style.animationName = “moveRight” |