demo · v140

Keyframes Orchestrator

A caret colour keyframe set fights the UA's blink loop unless you opt out. Switch the editor between caret-animation: auto (default, fights) and manual (lets the keyframes win) to see the same animation render two different ways.

Tip Click the editor to give it focus. The caret has to be visible to animate.

caret-animation: auto — the blink wins, colour stutters

type here to see the caret blink defeat the rainbow animation

caret-animation: manual — the keyframes drive the cursor

type here to see the rainbow animation actually animate
@keyframes rainbow {
  0%   { caret-color: red; }
  50%  { caret-color: blue; }
  100% { caret-color: red; }
}

input {
  animation: rainbow 2s infinite;
  caret-animation: manual;     /* opt out of the blink */
}

why this exists

The UA blink is implemented as a timed alpha pulse that bypasses the animation pipeline. When an author defines their own colour animation, the alpha pulse overrides it for half of every cycle — which renders as a stutter rather than a transition. caret-animation: manual tells the UA to step out of the way; the keyframes (or transition) you authored becomes the source of truth.

see also