caret-animation

Syntaxe

/* Valeurs avec un mot-clé */
caret-animation: auto;
caret-animation: manual;

/* Valeurs globales */
caret-animation: inherit;
caret-animation: initial;
caret-animation: revert;
caret-animation: revert-layer;
caret-animation: unset;

Valeurs

La propriété caret-animation est définie avec l'une des valeurs de mot-clé listées ci-dessous.

auto

Le curseur clignote. Il s'agit de la valeur par défaut (initiale).

manual

Le curseur ne clignote pas.

Définition formelle

Syntaxe formelle

caret-animation = 
  auto    |
  manual  

Exemples

Utilisation simple de caret-animation

Cet exemple montre la différence entre le fait d'avoir caret-animation défini sur auto ou sur manual sur un élément éditable.

HTML

Le balisage comporte deux éléments HTML <p> avec l'attribut contenteditable pour les rendre éditables.

<p contenteditable="true">
  Mon curseur s'anime car <code>caret-animation</code> est défini sur
  <code>auto</code>.
</p>
<p contenteditable="true">
  Mon curseur ne s'anime pas car <code>caret-animation</code> est défini sur
  <code>manual</code>.
</p>

CSS

Le CSS définit la valeur de caret-color à red. Il donne ensuite au premier paragraphe une valeur caret-animation de auto et au second une valeur caret-animation de manual.

p {
  caret-color: red;
}

p:first-of-type {
  caret-animation: auto;
}

p:last-of-type {
  caret-animation: manual;
}

Résultat

Le résultat rendu ressemble à ceci :

Essayez de sélectionner les deux paragraphes pour voir la différence de comportement du curseur.

Créer une animation de curseur personnalisée

Dans cet exemple, une animation de curseur personnalisée est appliquée à un paragraphe éditable et à un champ de saisie texte.

HTML

Le balisage comporte un élément HTML <p> et deux éléments HTML <input> texte. L'élément <p> possède l'attribut contenteditable pour le rendre éditable. Le paragraphe et le premier champ de saisie texte ont une classe custom-caret.

<p contenteditable="true" class="custom-caret">
  Ce paragraphe a une animation personnalisée appliquée, en plus de
  <code>caret-animation: manual</code> pour arrêter le clignotement par défaut
  du curseur et permettre de voir l'animation fluide.
</p>

<input
  type="text"
  class="custom-caret"
  value="J'ai une animation de curseur personnalisée" />

<input type="text" value="J'ai le curseur clignotant par défaut" />

CSS

Nous définissons d'abord un ensemble de @keyframes qui fait passer la caret-color de transparent à darkblue.

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

  to {
    caret-color: darkblue;
  }
}

Nous appliquons ensuite au <p> et au premier <input> l'animation personnalisée @keyframes, une caret-color, et une valeur caret-animation de manual pour désactiver le clignotement par défaut du curseur.

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;
}

Résultat

Le résultat rendu ressemble à ceci :

Essayez de sélectionner les deux premiers éléments pour voir à quoi ressemble l'animation personnalisée du curseur. Pour comparer avec le curseur clignotant par défaut, vous pouvez sélectionner le troisième élément.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés caret-color, caret-shape
• La propriété raccourcie caret
• Le module d'interface utilisateur de base CSS