Beyond · Motion

Keyframe animations

Where a transition reacts to a change, @keyframes scripts an animation that runs on its own. A @keyframes block names a sequence of stops — from/to, or percentages — and the animation shorthand attaches it to an element: name duration [rest…], needing at least a name and a duration.

The remaining tokens are read by shape, so their order is free: an integer or infinite sets the iteration count, alternate and reverse set direction, a second duration sets the delay, and a timing function eases each cycle. Each stop resolves in the element’s own context, so var() and light-dark() inside keyframes follow that element.

The recording indicator below is a static red. Make it pulse.

Your turn

Define a pulse animation and attach it, running forever and easing back and forth:

@keyframes pulse {
    from { color: #ff4040; }
    to   { color: #802020; }
}
.rec {
    color: #ff4040;
    animation: pulse 1s infinite alternate ease-in-out;
}

Press Run — the dot now breathes between bright and dark red. (For a ticking feel instead of a smooth blend, swap the easing for steps(4).) Solve shows the finished version; Reset restores the start.