The animation property applies a @keyframes-defined animation sequence to an element, combining animation-name, duration, timing-function, delay, iteration-count, and direction into a single shorthand.

Syntax

animation: name duration timing-function delay iteration-count direction;

Deep Dive Course

Unlike a transition, which requires an actual property change to trigger it, an animation referencing a valid @keyframes name begins playing automatically as soon as the element renders, without needing any specific triggering event at all, and can be set to loop a specific number of times, or indefinitely with animation-iteration-count: infinite. animation-fill-mode, a related property not included in the basic shorthand list above, controls whether the element retains the animation's final keyframe styles after it finishes playing, or reverts back to its original, pre-animation styles, which matters for animations that shouldn't simply snap back to their starting appearance once complete.

1Understanding Animation

💡

Set animation-fill-mode: forwards when an animation's final keyframe styles should persist after it finishes playing — without it, the element reverts back to its original, pre-animation styles the instant the animation completes, which often isn't the intended, desired behavior.

editor.html

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

.hero {
  animation: fadeIn 1s ease forwards;
}

localhost:3000

2Practical Example

Here is a real-world application of Animation showing how it is used in production CSS code.

editor.html

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Animation:

1. Use animation, rather than a transition, for effects that should play automatically on render, or that need more than two keyframe states, or that need to loop repeatedly

2. Set animation-fill-mode: forwards when an animation's ending appearance should persist rather than snapping back to the original pre-animation styles once it finishes

3. Use animation-iteration-count: infinite specifically for continuously repeating effects, like a loading spinner, and a specific finite number for effects that should play a set number of times and then stop

⚠️

Tip: Set animation-fill-mode: forwards when an animation's final keyframe styles should persist after it finishes playing — without it, the element reverts back to its original, pre-animation styles the instant the animation completes, which often isn't the intended, desired behavior.

editor.html

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

.hero {
  animation: fadeIn 1s ease forwards;
}

localhost:3000

Examples

Example 01Basic Usage

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

.hero {
  animation: fadeIn 1s ease forwards;
}

Example 02Advanced Example

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

Best Practices

Use animation, rather than a transition, for effects that should play automatically on render, or that need more than two keyframe states, or that need to loop repeatedly
Set animation-fill-mode: forwards when an animation's ending appearance should persist rather than snapping back to the original pre-animation styles once it finishes
Use animation-iteration-count: infinite specifically for continuously repeating effects, like a loading spinner, and a specific finite number for effects that should play a set number of times and then stop

Interview Question

Why does an element's appearance often snap back to its original, pre-animation styles immediately after an @keyframes animation finishes playing, unless animation-fill-mode: forwards is explicitly set?▼

Hint: Think about what an animation's default behavior is regarding the styles it applies, once its defined timeline has fully completed and finished running.

By default, an animation's effect on an element's styles is only active while that animation is actually, currently running, following its defined keyframe timeline in real time — once the animation completes its final iteration and the timeline reaches its end, the default behavior is for the animation's influence on the element's styles to simply stop entirely, at which point the element's styling reverts back to whatever it would be from its normal, non-animated CSS rules, essentially its original, pre-animation appearance, since nothing is any longer actively overriding those normal rules. animation-fill-mode: forwards specifically changes this default behavior, telling the browser to keep applying the animation's very last keyframe's computed styles even after the animation has technically finished running and stopped advancing through its timeline, effectively freezing the element at its ending appearance indefinitely, rather than letting it snap back to its pre-animation state. This is exactly why forwards is such a commonly needed addition for entrance-style animations, like a fade-in, where the whole point is for the element to remain visible and fully opaque afterward, not to fade back out to its original, invisible starting state the instant the animation completes.

Exercises

MediumPractice using Animation in a real scenario.

View Solution

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

.hero {
  animation: fadeIn 1s ease forwards;
}

Frequently Asked Questions

Related Functions

KeyframesAnimation-durationAnimation-delay