demo · v140

Transition vs Keyframes

caret-animation: manual unlocks both CSS animation primitives, not just keyframes. Side-by-side: a one-shot transition (blue → red) driven by a class toggle, and a continuous keyframe loop. Same opt-out, two completely different choreographies.

transition (one-shot, on toggle)

keyframes (loop)

Focus either field. The left caret transitions between two colours each time you press the button. The right caret cycles continuously while focused.

/* one-shot transition */
input { caret-color: blue; transition: caret-color 0.6s; caret-animation: manual; }
input.hot { caret-color: red; }

/* continuous keyframes */
input { caret-animation: manual; animation: kf 1.4s ease-in-out infinite; }
@keyframes kf { 50% { caret-color: amber; } }

why two opt-outs would be wrong

A separate property for transitions vs keyframes would have meant authors picking the wrong one and getting a stutter. One property — caret-animation — turns the UA blink off for both CSS animation primitives at once. The CSSWG explicitly chose this shape over per-primitive flags during the level-4 review.

see also