`caret-animation` CSS property

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die CSS-Eigenschaft caret-animation wird verwendet, um das Blinken der Einfügemarke zu aktivieren oder zu deaktivieren. Die Einfügemarke ist die sichtbare Markierung, die in bearbeitbaren Elementen anzeigt, wo das nächste Zeichen eingefügt oder gelöscht wird.

Die Eigenschaft caret-animation kann auch als Teil der Kurzschreibweise caret festgelegt werden.

Hinweis: Wenn Sie eine benutzerdefinierte Animation auf die Einfügemarke anwenden, sollten Sie das standardmäßige Blinken deaktivieren, damit es die Animation nicht beeinträchtigt.

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;

Werte

Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:

auto: Die Einfügemarke blinkt. Dies ist der Standardwert (Anfangswert).
manual: Die Einfügemarke blinkt nicht.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Text or elements that accept text input
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

caret-animation = 
  auto    |
  manual

Beispiele

Grundlegende Verwendung von `caret-animation`

Dieses Beispiel zeigt den Unterschied zwischen den Werten auto und manual für caret-animation bei einem bearbeitbaren Element.

HTML

Das Markup enthält zwei <p>-Elemente, die durch das Attribut contenteditable bearbeitbar sind.

html

<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

Das CSS setzt den Wert von caret-color auf red. Anschließend erhält der erste Absatz für caret-animation den Wert auto und der zweite Absatz den Wert manual.

css

p {
  caret-color: red;
}

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

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

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Setzen Sie den Fokus nacheinander auf die beiden Absätze, um den Unterschied im Verhalten der Einfügemarke zu sehen.

Eine benutzerdefinierte Animation der Einfügemarke erstellen

In diesem Beispiel wird eine benutzerdefinierte Animation der Einfügemarke auf einen bearbeitbaren Absatz und ein Texteingabefeld angewendet.

HTML

Das Markup enthält ein <p>-Element und zwei <input>-Elemente für Texteingaben. Für das <p>-Element ist das Attribut contenteditable gesetzt, damit es bearbeitet werden kann. Dem Absatz und dem ersten Texteingabefeld ist die class custom-caret zugewiesen.

html

<p contenteditable="true" class="custom-caret">
  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"
  class="custom-caret"
  value="I've got a custom caret animation" />

<input type="text" value="I've got the default blinking caret" />

CSS

Zunächst definieren wir @keyframes, die caret-color von transparent zu darkblue ändern.

css

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

  to {
    caret-color: darkblue;
  }
}

Anschließend versehen wir das <p>-Element und das erste <input>-Element mit der benutzerdefinierten @keyframes-Animation und einer caret-color. Außerdem setzen wir caret-animation auf manual, um das standardmäßige Blinken der Einfügemarke zu deaktivieren.

body {
  display: flex;
  flex-direction: column;
}

input {
  margin-bottom: 20px;
}

css

.custom-caret {
  animation: custom-caret-animation infinite linear alternate 0.75s;
  caret-color: darkblue;
  caret-animation: manual;
}

p,
input {
  font-size: 1.6rem;
}

Ergebnis

Das gerenderte Ergebnis sieht so aus:

Setzen Sie den Fokus nacheinander auf die ersten beiden Elemente, um die benutzerdefinierte Animation der Einfügemarke zu sehen. Zum Vergleich mit der standardmäßig blinkenden Einfügemarke können Sie den Fokus auf das dritte Element setzen.