animation-name

Definition

The animation-name property in CSS3 is used to define and apply animations to HTML elements. Its purpose is to reference a set of keyframes, effectively ‘naming’ the animation. This name is then used as a handle to apply the animation sequence defined within @keyframes to the selected HTML elements.

For instance, let’s consider the example of a button that changes color when hovered over:

@keyframes color-change {
  0% {
    background-color: blue;
  }

  100% {
    background-color: green;
  }
}

button:hover {
  animation-name: color-change;
  animation-duration: 2s;
}

In this example, we define an animation using the @keyframes rule, and we name it color-change. This animation changes the background color of an element from blue to green. By setting the animation-name of the button:hover selector to color-change, we apply this animation to the button element when it is hovered over. The animation-duration property is used to control how long this transition will take, in this case, 2 seconds.

It’s crucial to note that if the name specified via animation-name doesn’t match any declared @keyframes rules, no animation will occur. The browser will simply ignore the property.

In practice, animation-name is incredibly versatile. You can use it to animate almost any CSS property: position, color, opacity, size, and many more. It’s used in various interactive elements across the web, from buttons and drop-down menus to loading animations and page transitions.

However, animation-name doesn’t work in isolation. To fully control your animations, you will often use it in combination with other animation properties. For example, animation-duration controls how long the animation takes to complete one cycle, and animation-iteration-count determines how many times the animation plays.

Syntax

.modal {
  animation-name: fade-in;
}

Values

<custom-ident> referencing keyframes.
none to disable.

Practical Examples

.modal {
  animation-name: fade-in;
  animation-duration: 240ms;
  animation-fill-mode: both;
}

Assign predefined keyframe animations to elements.

HTML

Modal shell

Code

<style>
@keyframes fade-in-name-demo { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
.fade-in-name-demo { animation: fade-in-name-demo 0.24s ease-out both; }
</style>
<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-xl fade-in-name-demo">Modal shell</div>

Tips & Best Practices

Keep keyframe names semantic (fade-in, slide-up) for clarity.
Reuse keyframes across components to reduce CSS size.

Accessibility & UX Notes

Ensure named animations respect reduced-motion preferences.

Browser Support

Supported widely.

@keyframes definitions.
animation shorthand.
animation-duration for timing.