CSS animation-name Property

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:


  animation-name: moveRight;

Separate each keyframe name with a comma while specifying multiple keyframe names. See implementation in the below example:


  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:

noneSpecify no animation. This is the default value.
keyFrameNameSpecify a keyframe name that is to be applied to the element. Multiple keyframe names must be comma-separated.
initialSets the animation-name property to its default value(none).
inheritInherits the animation-name property from the parent element.

General Info

Default Valuenone
JavaScript Usageelement.style.animationName = “moveRight”