CSS animation-name Property

❮ Prev Next ❯

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";

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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.