CSS animation-name Property

The animation-name CSS property defines the name of the @keyframes rule you want to apply. It has two values: none and keyframename. None is the default value which specifies that there will be no animation. Keyframename specifies the name of the animation.

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

<!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.

Related resources

Animation, @keyframes, align-content, align-self, border, width, height, padding, color, background-color.

Browser support

43.0+
4.0-42.0 -webkit-
10.0+ 12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-



Related articles