CSS animation-name Property

The animation-name property selects the specific @keyframes at-rule that defines the playback stages for an element.

selector { animation-name: name; }

none	The default value that ensures no animation is applied or stops any currently running animation.
<custom-ident>	A case-sensitive name that matches a specific @keyframes at-rule defined in your CSS.

Code Examples

A basic example that links a blinking @keyframes sequence to a div element using the animation-name property.

<style>
.status-light {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff0000;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
</style>
<div class="status-light"></div>

Using JavaScript to dynamically apply an animation-name to an element, triggering a movement sequence on a button click.

<style>
.box {
  width: 100px;
  height: 100px;
  background: #2196f3;
  position: relative;
}
@keyframes slide {
  from { left: 0px; }
  to { left: 200px; }
}
</style>
<div id="mover" class="box"></div>
<button onclick="startMove()">Start Animation</button>
<script>
function startMove() {
  const el = document.getElementById("mover");
  el.style.animationName = "slide";
  el.style.animationDuration = "1.5s";
  el.style.animationFillMode = "forwards";
  el.style.backgroundColor = "#4caf50";
}
</script>

Pro Tip

You can swap animation names on the fly with JavaScript to change an element's state or behavior based on user interaction. If you need to restart a one-time animation, you can temporarily remove the animation-name, trigger a reflow, and then re-apply it to trick the browser into playing it from the start again.

Deep Dive

Think of animation-name as a dial on a media player that selects which disc to play. The @keyframes block is the disc containing the actual movement instructions, and animation-name tells the browser exactly which one to load for the element. You can list multiple names separated by commas to layer different motion sequences on a single element. If the name you provide does not match an existing @keyframes rule, the browser will ignore it and no motion occurs. It is the bridge that links your element's style to your custom animation logic.

Best Practices

Use descriptive names like "slideIn" or "heroPulse" so your code is easy to read months down the road. Since names are case-sensitive, establish a naming convention like camelCase or kebab-case and stick to it throughout your project to avoid bugs. Always make sure the @keyframes rule you are referencing is actually defined in your stylesheet, otherwise the property does nothing.

Common Pitfalls

The most frequent headache is a simple typo or case-mismatch between the property value and the @keyframes identifier. Also, remember that setting this to "none" will immediately kill any running animation, which can be useful but might cause a jarring jump if not handled correctly. Do not use CSS keywords like "initial" or "inherit" as your custom animation names.

Accessibility

Motion can be a major problem for users with vestibular disorders. Always wrap your animations in a "prefers-reduced-motion" media query to set animation-name to "none" or a static state for those who have motion sensitivities enabled in their operating system.

Dev Data Table: animation-name property

default	none
animatable	no
inherited	no
experimental	no
year_intro	2009
year_standard	2013
js_syntax_1	object.style.animationName = "myAnimation";
js_syntax_2	object.style.setProperty("animation-name", "myAnimation");
js_note	When using the style object, camelCase is required, and the string must exactly match your CSS @keyframes identifier.
browsers	{ "Chrome": 43, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 30, "Chrome Android": 43, "Safari on iOS": 9, "Samsung Internet": 4, "Opera Mobile": 30 }