📘Animations: bring CSS to life

A CSS animation makes an element change over time. You describe the steps with @keyframes, then apply them with the animation property.

@keyframes float defines the key frames (from → to); animation: float 1s infinite links them to the element, with a duration and a repeat.

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
.badge { animation: float 1s infinite alternate; }