animation

animation combines the settings for a named keyframe animation. Unlike a transition, an animation can run through a sequence without a separate end-state CSS value change.

Run one finite movement

Check the control to apply the animation. The square moves for one second and forwards retains the final position. Uncheck to remove the animation and reset.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.run:checked ~ .stage .box {
  animation: travel 1s ease-out 0s 1 normal forwards;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Animate two independent properties

Two comma-separated animations reference separate keyframes. One moves the square; the other changes its background. Their final styles remain only while the animation declarations stay applied.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
@keyframes tint {
  from {
    background: #2563eb;
  }
  to {
    background: #0f766e;
  }
}
.run:checked ~ .stage .box {
  animation:
    travel 1s ease-out forwards,
    tint 1s linear forwards;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Shorthand parsing and resets

The first time is duration and the second is delay. Other components can be reordered where parsing is unambiguous; placing the keyframe name last avoids names being mistaken for keywords. No duration is syntactically required, but omitted duration is 0s and usually gives no visible motion.

Omitted components reset to their initial values: name none, duration 0s, easing ease, delay 0s, count 1, direction normal, fill none, state running, and timeline auto. The settings are not inherited. Current syntax includes timeline support, while older implementations reset the timeline without accepting it inside the shorthand. Declare an intentional animation-timeline after the shorthand when targeting those engines; range/composition-related reset behavior also needs its own support check.

Common mistakes

No matching keyframes means no named effect. Animation is visual styling, not a dialog, toast announcement, or application state. Keep important messages visible without motion. Avoid unnecessary infinite loops, provide control for ongoing motion, and honor reduced-motion preferences.

Learn animation-name, animation-fill-mode, and transition.

The demonstrations are stationary when prefers-reduced-motion:reduce is active. Their code remains available for inspection.

Sources and browser support

MDN: animation describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.