CSS animation-name Property

The animation-name property specifies one or more names of animations defined by the @keyframes rule which should be applied to the selected element. When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

The animation-name property is one of the CSS3 properties.

The animation shorthand property can be used to set all animation properties at once. Different animation properties can control the animation. They can specify the iteration time of the animation, whether the animation should be playing or paused and whether it alternates between the values. The start time of the animation can also be delayed.

Initial Value none
Applies to All elements. It also applies to ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.animationName = "element";

Syntax

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

Example of the animation-name property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>
In the given example the name of animation is set to "element". You can choose any name you want.

Values

Value Description
none This is default value. Specifies that there will be no animation
keyframename Specifies the name of animation.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

What does the CSS animation-name property do?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?