How do CSS animations and keyframes work?

An animation is applied with the animation property and runs automatically when the element matches the rule. Unlike a transition, it does not need a property value to change. Keyframes can define from and to, percentages, or both.

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

.card {
  animation: fade-up 300ms ease-out both;
}

The controls

• animation-name and animation-duration set the keyframes and timing
• animation-iteration-count controls how many times it runs, including infinite
• animation-direction supports normal, reverse, alternate and alternate-reverse
• animation-fill-mode keeps the first or last keyframe styles before or after the run
• animation-play-state can pause and resume
• Transitions need a value change; animations run from their keyframes

Animations are best for entrance effects, loading indicators and small delight. They should not block interaction or run forever when the user has asked for reduced motion. Pair them with a prefers-reduced-motion query that removes non-essential movement.