CSS animation-name Property

CSS animation-name Property

The animation-name property in CSS specifies the name of the keyframes animation that should be applied to an element. It connects an element to a defined @keyframes rule.

1. Syntax

selector {
  animation-name: animationName;
}

2. Accepted Values

Value	Description
none (default)	No animation is applied.
animationName	Refers to the name of a @keyframes animation.
inherit	Inherits the animation name from the parent element.
initial	Resets to the default value (none).
unset	Removes the inherited or default value.

3. Example – Basic Animation Using animation-name

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

✅ The element moves from left to right using  move animation.

4. Example – Multiple Animations

.box {
  animation-name: move, fade;
  animation-duration: 3s, 2s;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

✅ The element moves and fades in simultaneously.

5. Best Practices

✔ Always define @keyframes when using animation-name.
✔ Use meaningful animation names for better readability.
✔ Combine with animation-duration, animation-timing-function, etc., for full control.