demo · v132

caret-animation: manual vs auto

Both inputs animate caret-color between blue and red. The left input has the default auto caret animation (system blink fights the colour animation). The right input uses caret-animation: manual, so the system blink is suppressed and the colour transitions smoothly. Click into either input to compare.

checking support…
focus either input to inspect computed caret-animation.
input.manual {
  caret-color: var(--accent-blue);
  caret-animation: manual;
  animation: caretFade 1s infinite ease-in-out;
}
@keyframes caretFade {
  0%, 100% { caret-color: var(--accent-blue); }
  50%      { caret-color: var(--accent-rose); }
}

see also