v132 · css

CSS caret-animation property

Chromium supports animation of the caret-color property, but the platform caret blink can interfere with author keyframes. caret-animation lets authors choose auto for the user-agent behavior or manual when CSS animation should control the caret.

concepts

  1. caret-animation

    Override the system caret blink.

  2. blink tempo

    Use caret-animation: manual with author keyframes to pick your own blink rate, timing function, and colour sequence.

  3. preset gallery

    Six ready-to-paste caret styles: typewriter, pulse, matrix, pride, heartbeat, terminal. Click any input to see the cursor cycle; copy the CSS underneath.

  4. accessibility & reduced motion

    The naive version always animates. The respectful version turns the animation off under prefers-reduced-motion: reduce and hands the blink back to the system.

  5. Chat Input

    A chat interface where the caret changes per input mode: auto for normal text, manual steady for code snippets, and manual with keyframes for @mention mode.

  6. Code Editor

    An editor mockup with four Vim-style modes. Each mode sets caret-color, caret-animation: manual, and optional author keyframes via a data-mode selector.

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