animation

Definition

The animation CSS property is a shorthand property for animating an element. It sets the values for all animation properties, including animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

Syntax

.toast {
  animation: fade-in 260ms ease-out forwards;
}

Values

<name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>.
Shorthand accepts values in any order after the required duration.
none: disable animations.

Practical Examples

.toast {
  animation: fade-in 260ms ease-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

Use the shorthand for concise animation declarations once the keyframes are defined.

HTML

Toast message

Code

<style>
@keyframes fade-in-demo { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }
.fade-in-demo { animation: fade-in-demo 260ms ease-out forwards; }
</style>
<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-lg fade-in-demo">Toast message</div>

Tips & Best Practices

Define keyframes once and reuse them across components for consistency.
Prefer transition for simple hover effects; reserve animations for more complex sequences.
Respect prefers-reduced-motion to provide alternatives.

Accessibility & UX Notes

Provide motion-reduced fallbacks and avoid aggressive movements that trigger vestibular discomfort.

Browser Support

CSS animations are supported in modern browsers including IE10+ (with some prefixing in older engines).

animation-duration, animation-delay, and other longhands.
transition for simpler state changes.
@keyframes where the animation steps are defined.