Animations

`@keyframes` defines a multi-step animation. `animation` applies it to an element with duration, iteration, and timing.

4 min read Level 2/5 #css#animations#keyframes

What you'll learn

Define keyframes
Apply with `animation`
Use `animation-fill-mode`

When a transition isn’t enough — multi-step animations, loops, complex sequences — use @keyframes.

Define and Apply

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

The animation runs the keyframes for 2 seconds, eases in and out, loops forever.

The Shorthand

animation: <name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>;

A common pattern:

animation: fadeIn 300ms ease-out forwards;

forwards keeps the final state after the animation ends.

`from` and `to` (Shortcut for `0%` and `100%`)

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

Multiple Properties Per Keyframe

@keyframes slideAndSpin {
  0%   { transform: translateX(0) rotate(0); }
  50%  { transform: translateX(100px) rotate(180deg); }
  100% { transform: translateX(0) rotate(360deg); }
}

Pause On Hover

.marquee:hover {
  animation-play-state: paused;
}

Animation Direction

animation-direction: alternate;   /* 0→100, then 100→0, then 0→100, etc. */
animation-direction: reverse;      /* 100→0 */

Iteration

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.5;

Respect `prefers-reduced-motion`

Same as transitions — disable for users who don’t want motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
  }
}

Up Next

Visual effects — filters and blend modes.

Filters & Blend Modes →