What CSS keyframes do

@keyframes names the states of a CSS animation. Defining those states does not run anything by itself: a matching animation-name, duration and other animation settings apply them to an element.

Working example

<input id="run" type="checkbox" /><label for="run">Run animation</label>
<div class="box" aria-hidden="true"></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(8rem);
  }
}
.box {
  width: 3rem;
  height: 3rem;
  background: #2563eb;
}
input:checked ~ .box {
  animation: travel 1.5s ease-in-out 2 alternate;
}
@media (prefers-reduced-motion: reduce) {
  input:checked ~ .box {
    animation: none;
  }
}

Check the control to run two iterations. The second runs in reverse because of alternate; the box returns to its start. Uncheck and recheck to restart. With reduced motion enabled, it stays still.

Read the states

from and to mean 0% and 100%. Intermediate percentages add stops, and the browser interpolates animatable properties between them. A duration of 0s has no visible travel. A property that cannot interpolate smoothly may change discretely instead.

The animation shorthand sets several longhands at once. transition is often simpler for a single change between interface states. Neither mechanism should carry essential information only through movement. Follow motion and reduced motion before adding motion to controls.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.