CSS animation-name

The animation-name property in CSS specifies the name of one or more @keyframes animations that should be applied to an element. By defining the animation name, you link the animation’s keyframes to an element to create a visual effect.

Syntax of animation-name

</>
Copy
animation-name: keyframename | none | initial | inherit;

Values

ValueDescription
keyframenameSpecifies the name of the @keyframes animation to apply to the element.
noneNo animation is applied to the element.
initialSets the property to its default value (none).
inheritInherits the value from the parent element.

Default Value

none

Examples for animation-name

Using the CSS animation-name Property

The following examples demonstrate how the animation-name property can be used to apply specific animations to elements.

</>
Copy
/* Apply the keyframes animation named "slide" */
.element {
  animation-name: slide;
}

/* Disable any animation */
.element {
  animation-name: none;
}

/* Inherit the animation name from the parent element */
.element {
  animation-name: inherit;
}

Example for Applying animation-name

The following example demonstrates the use of animation-name to apply a “slide” animation to one element and no animation to another element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(200px);
    }
  }

  .animated {
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    background-color: green;
    margin: 10px;
    padding: 10px;
  }

  .no-animation {
    animation-name: none;
    background-color: red;
    margin: 10px;
    padding: 10px;
  }
  
  div {
    width: 200px;
    height: 100px;
    line-height: 100px;
    color: white;
    font-family: sans-serif;
  }
</style>
</head>
<body>

<h1>CSS animation-name Example</h1>

<div class="animated">Animated Box</div>
<div class="no-animation">No Animation</div>

</body>
</html>

Animated Box (.animated)

  1. The class .animated uses the animation-name property set to slide.
  2. The slide animation is defined in the @keyframes block. It moves the element horizontally from translateX(0) to translateX(200px).
  3. The animation-duration is set to 2s, meaning the animation completes in 2 seconds.
  4. The animation-timing-function is set to ease-in-out, which creates a smooth transition by starting and ending the animation slowly.
  5. As a result, the green box moves from its initial position to 200px to the right over 2 seconds in a smooth motion.

No Animation Box (.no-animation)

  1. The class .no-animation uses the animation-name property set to none.
  2. The animation-name: none disables the animation, meaning no @keyframes animation is applied to this element.
  3. Even though other animation-related properties (like animation-duration) could be defined, they are ignored because animation-name: none prevents any animation from running.
  4. As a result, the red box remains static and does not move or animate.

Browser Support

The animation-name property is supported in most modern browsers. Below is a compatibility table:

BrowserVersion
Chrome43
Edge10
Firefox16
Safari9
Opera30