CSS animation-name Property

What You’ll Learn

The animation-name property connects an element to a named @keyframes animation. Without a matching name, the keyframes exist in CSS but nothing runs on the page.

Definition and Usage

The animation-name CSS property specifies which @keyframes animation should run on an element. You first define the animation steps with @keyframes, then use animation-name to attach that animation to a selector.

Think of @keyframes as writing the script and animation-name as choosing which actor performs it. You still need properties like animation-duration for the animation to be visible.

📝 Syntax

Set animation-name to none or one or more custom keyframe names:

selector {
  animation-name: none | keyframe-name;
}

Basic Example

@keyframes changeColor {
  0% { background-color: blue; }
  100% { background-color: green; }
}

.animated-div {
  animation-name: changeColor;
  animation-duration: 2s;
}

Syntax Rules

• The initial value is none, meaning no animation is applied.
• The value must match a name declared in a @keyframes rule.
• Keyframe names are case-sensitive: fadeIn and fadein are different.
• You can list multiple names separated by commas for multiple simultaneous animations.
• In the animation shorthand, the name is always the first value.

Default Value

The initial value of animation-name is none. No animation runs until you assign a valid keyframe name and provide the other required animation properties.

💎 Property Values

These are the values you will use when applying named animations.

How animation-name Works with @keyframes

Every animation needs two parts working together:

@keyframes vs animation-name

Examples Gallery

Try animation-name with a color animation, slide-in motion, multiple names, and shorthand syntax.

<style>
  @keyframes changeColor {
    0% { background-color: blue; }
    100% { background-color: green; }
  }
  .animated-div {
    width: 100px;
    height: 100px;
    animation-name: changeColor;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
</style>

<div class="animated-div"></div>

@keyframes slideIn {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.card {
  animation-name: slideIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.badge {
  animation-name: fadeIn, pulse;
  animation-duration: 0.6s, 1.2s;
  animation-iteration-count: 1, infinite;
}

.toast {
  animation: fadeIn 0.5s ease-out forwards;
}

💡 Best Practices