CSS Animation Keyframes Tutorial

What are Keyframes?

Keyframes let you define the intermediate steps in a CSS animation. By specifying the appearance and position of an element at various points during the animation, you can create complex motion and visual effects.

Live Example

@keyframes bounce {
  0%   { transform: translateY(0) rotate(0deg); background:#ff6b6b; }
  25%  { transform: translateY(-30px) rotate(15deg); background:#feca57; }
  50%  { transform: translateY(0) rotate(0deg); background:#1dd1a1; }
  75%  { transform: translateY(-30px) rotate(-15deg); background:#54a0ff; }
  100% { transform: translateY(0) rotate(0deg); background:#ff6b6b; }
}
.box.animate {
  animation: bounce 2s infinite ease-in-out;
}

How It Works

@keyframes defines a sequence of styles.
Percentages (0%‑100%) mark the stages of the animation.
The animation property applies the keyframes to an element.
Combine transform, opacity, color, etc., for rich effects.