Thecaret-animationCSS property is used to enable or disable the blinking behavior of theinsertion caret, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.

When applying a custom animation to the caret, you should stop the default blinking so that it doesn't interfere with the animation.

Syntax

/* Keyword values */caret-animation: auto;caret-animation: manual;/* Global values */caret-animation: inherit;caret-animation: initial;caret-animation: revert;caret-animation: revert-layer;caret-animation: unset;

Values

Thecaret-animation property is specified as one of the keyword values listed below.

auto

The caret blinks on and off. This is the default (initial) value.

manual

The caret does not blink on and off.

Formal definition

Formal syntax

caret-animation =
auto|
manual

Examples

Basiccaret-animation usage

This example shows the difference between havingcaret-animation set toauto versusmanual on an editable element.

HTML

The markup features two<p> elements withcontenteditable set to make them editable.

<p contenteditable="true">  My caret animates because <code>caret-animation</code> is set to  <code>auto</code>.</p><p contenteditable="true">  My caret doesn't animate because <code>caret-animation</code> is set to  <code>manual</code>.</p>

CSS

The CSS sets thecaret-color value tored. It then gives the first paragraph acaret-animation value ofauto and the second paragraph acaret-animation value ofmanual.

p {  caret-color: red;}p:first-of-type {  caret-animation: auto;}p:last-of-type {  caret-animation: manual;}

Result

The rendered result looks like so:

Try focusing the two paragraphs to see the difference in caret behavior.

Creating a custom caret animation

In this example, a custom caret animation is applied to an editable paragraph and a text input.

HTML

The markup features a<p> element and two text<input> elements. The<p> element has thecontenteditable attribute set on it to make it editable. The paragraph and first text input have aclass ofcustom-caret set on them.

<p contenteditable="true">  This paragraph has a custom animation applied to it, plus  <code>caret-animation: manual</code> to stop the default caret blinking and  allow the smooth animation to be seen.</p><input  type="text"   value="I've got a custom caret animation" /><input type="text" value="I've got the default blinking caret" />

CSS

We first define a set of@keyframes that change thecaret-color fromtransparent todarkblue.

@keyframes custom-caret-animation {  from {    caret-color: transparent;  }  to {    caret-color: darkblue;  }}

We then style the<p> and the first<input> with the custom@keyframes animation, acaret-color, and acaret-animation value ofmanual to turn the default caret blinking behavior off.

body {  display: flex;  flex-direction: column;}input {  margin-bottom: 20px;}

.custom-caret {  animation: custom-caret-animation infinite linear alternate 0.75s;  caret-color: darkblue;  caret-animation: manual;}p,input {  font-size: 1.6rem;}

Result

The rendered result looks like so:

Try focusing the first two elements to see what the custom caret animation looks like. To compare it with the default blinking caret, you can focus the third element.

Specifications

Browser compatibility

See also

• caret-color,caret-shape
• caret shorthand
• CSS basic user interface module