CSS animation Property

The animation property is a shorthand for applying multiple animation sub-properties to an element, linking it to a defined @keyframes sequence.

selector { animation: name duration timing-function delay iteration-count direction fill-mode play-state; }
<keyframes-name> Specifies the name of the @keyframes rule that describes the animation frames.
<time> Sets the duration of the animation or the delay before it starts, using seconds (s) or milliseconds (ms).
<timing-function> Defines the speed curve of the animation, such as linear, ease, ease-in, ease-out, or cubic-bezier.
<iteration-count> Defines how many times the animation should play, either as a specific number or the keyword infinite.
normal Plays the animation forward from start to finish in every cycle.
reverse Plays the animation in the opposite direction, from the end back to the start.
alternate Plays the animation forward first, then backward, alternating every cycle.
alternate-reverse Plays the animation backward first, then forward, alternating every cycle.
none Default fill mode where no styles are applied to the element before or after the animation executes.
forwards The element retains the computed values set by the last keyframe after the animation finishes.
backwards The element applies the values of the first keyframe during the delay period before the animation starts.
both Applies the rules for both forwards and backwards fill modes.
running The default state that allows the animation to play normally.
paused Freezes the animation at its current progress until it is set back to running.

Code Examples

A basic infinite pulse animation that changes the scale and background color of a div using a simple shorthand declaration.

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); background-color: #0000ff; }
  100% { transform: scale(1); }
}
</style>
<div class="box"></div>

An advanced example featuring a CSS loading spinner with JavaScript interaction to toggle the animation-play-state between running and paused.

<style>
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #cccccc;
  border-top-color: #333333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.paused {
  animation-play-state: paused;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

<div id="myLoader" class="loader"></div>
<button onclick="toggleAnim()">Toggle Spin</button>

<script>
function toggleAnim() {
  const el = document.getElementById("myLoader");
  if (el.style.animationPlayState === "paused") {
    el.style.animationPlayState = "running";
  } else {
    el.style.animationPlayState = "paused";
  }
}
</script>

Pro Tip

You can apply multiple animations to a single element by separating them with commas. This is like having an actor perform two different scripts simultaneously, such as sliding across the screen while also fading out. For debugging, use the browser developer tools' animation inspector to scrub through the timeline and pause specific frames to see exactly how your styles are being applied at any given millisecond.

Deep Dive

Think of the animation property as the director of a stage play. The @keyframes rule is your script, defining what happens at specific points in time. The animation shorthand tells the element which script to follow, how long the performance should last, and how many times to repeat it. It bundles eight sub-properties into one line. The most important thing to remember is the order of time values: the first time value encountered is always the duration, and the second is the delay. If you omit the duration, it defaults to 0, and your animation will never actually run. It essentially transitions CSS properties from one state to another over a timeline you define.

Best Practices

Always provide at least a name and a duration. Use the shorthand property to keep your CSS clean and readable rather than writing out eight individual properties. When creating complex sequences, use descriptive names for your keyframes so other developers know exactly what the motion represents. If you want an element to stay in its finished state, make sure to include the forwards keyword in the fill-mode section of your shorthand string.

Common Pitfalls

The biggest mistake beginners make is forgetting to define the animation-duration. Since the default is 0s, the animation exists but completes instantly, making it invisible. Another common issue is syntax order; while many values can be placed in any order, the browser will always treat the first time unit as the duration and the second as the delay. Also, ensure your @keyframes name matches the animation-name exactly, as it is case-sensitive.

Accessibility

Motion can cause physical discomfort or seizures for users with vestibular disorders. Always wrap your animations in a media query that checks for prefers-reduced-motion: reduce. This allows you to scale back or completely remove animations for users who have requested a simplified experience in their system settings. Avoid using fast, strobing effects that flash more than three times per second.

Dev Data Table: animation property

default none 0s ease 0s 1 normal none running
animatable no
inherited no
experimental no
year_intro 2009
year_standard 2015
js_syntax_1 element.style.animation = "slidein 3s ease-in 1s infinite reverse both running";
js_syntax_2 element.style.setProperty("animation", "slidein 3s ease-in 1s infinite reverse both running");
js_note When manipulating animations via JavaScript, you can trigger a restart by removing and re-adding the animation class or property after a brief reflow.
browsers { "Chrome": 43, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 30, "Chrome Android": 43, "Safari on iOS": 9, "Samsung Internet": 4, "Opera Mobile": 30 }
results render here...