caret-animation CSS property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The caret-animation CSS property is used to enable or disable the blinking behavior of the insertion caret, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.
The caret-animation property can also be set as part of the caret shorthand property.
Note: When applying a custom animation to the caret, you should stop the default blinking so that it doesn't interfere with the animation.
Syntax
css
/* 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
The caret-animation property is specified as one of the keyword values listed below.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | Text or elements that accept text input |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
caret-animation =
auto |
manual