What is the difference between CSS transitions and keyframe animations?

Short answer

Transitions animate between two states triggered by a change. Keyframe animations define multiple waypoints and can run automatically, loop, and offer finer control over timing.

Key differences

• Transitions: Best for simple A-to-B changes (hover, focus). Require a trigger.
• Animations: Best for complex sequences, loops, and entrance effects. Run automatically once defined.

Example

/* Transition */
.btn {
  background: blue;
  transition: background 0.3s;
}
.btn:hover { background: red; }

/* Keyframe animation */
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.modal {
  animation: slideIn 0.5s ease-out forwards;
}

When to use each

• Use transitions for buttons, links, and state changes.
• Use animations for loading spinners, carousels, and page entrance effects.