v140 · css

CSS caret-animation property

Chromium supports animation of the caret-color property, but when animated the default blinking behavior of the caret interferes with the animation. For instance, see the example at https://drafts.csswg.org/css-ui/#caret-animation where an animation from blue to red and back is rendered as a blinking cursor that is randomly blue or red. The CSS caret-animati

concepts

  1. Caret Animation

    caret-animation lets the author override the system caret blink. manual stops the blink so a custom animation can take over; auto restores the platform default.

  2. Motion-Sensitivity Override

    The accessibility motivation: a motion-sensitive user disables the author's animated caret via prefers-reduced-motion or a user stylesheet. Toggle the override and watch the caret revert.

  3. Keyframes Orchestrator

    Side-by-side editors: one with caret-animation: auto (the UA blink fights your colour keyframes), one with manual (the keyframes finally win).

  4. Focus Pulse

    Three inputs with three pulse patterns: idle blue inhale, invalid red urgency, just-saved green hold. The caret carries state the border can't show.

  5. Transition vs Keyframes

    One caret-animation property, both CSS animation primitives. A one-shot transition on toggle next to a continuous keyframe loop.

why it shipped

When the caret-color is animated the default blinking cursor interferes with the animation. This CSS property enables authors to disable the blinking when animating the caret color.

references