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:

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:

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
InheritedNo
JavaScript Usageelement.style.animationName = “moveRight”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment