Writing Keyframe Animations with @keyframes

Why Animations Go Beyond Transitions

A transition only animates between two states - a start and an end. @keyframes animations can define multiple steps in between, run automatically without needing a triggering state change, and repeat indefinitely.

Defining a @keyframes Sequence

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

from and to are shorthand for 0% and 100%. More precise control is possible by using percentage steps directly.

Multiple Steps with Percentages

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

Applying the Animation to an Element

.card {
  animation: fade-in-up 0.4s ease-out;
}
.badge {
  animation: pulse 2s ease-in-out infinite;
}

The animation shorthand accepts the keyframe name, duration, timing function, and options like infinite to repeat forever, or a specific repeat count.

Quick Comparison