`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 caret-animation CSS-Eigenschaft wird verwendet, um das Blinken des Einfügemarkierers ein- oder auszuschalten. Der Einfügemarkierer ist der sichtbare Marker, der in bearbeitbaren Elementen erscheint und anzeigt, wo das nächste Zeichen eingefügt oder gelöscht wird.

Wenn Sie eine benutzerdefinierte Animation auf den Markierer anwenden, sollten Sie das standardmäßige Blinken stoppen, damit es die Animation nicht stört.

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

Die caret-animation-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

auto: Der Markierer blinkt an und aus. Dies ist der Standardwert (initial).
manual: Der Markierer blinkt nicht an und aus.

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 caret-animation mit den Werten auto und manual auf einem bearbeitbaren Element.

HTML

Das Markup enthält zwei <p>-Elemente mit dem Attribut contenteditable, um sie bearbeitbar zu machen.

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. Es weist dem ersten Absatz einen caret-animation-Wert von auto und dem zweiten Absatz einen caret-animation-Wert von manual zu.

css

p {
  caret-color: red;
}

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

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

Ergebnis

Das gerenderte Ergebnis sieht folgendermaßen aus:

Versuchen Sie, sich auf die beiden Absätze zu konzentrieren, um den Unterschied im Markierer-Verhalten zu sehen.

Erstellung einer benutzerdefinierten Markierer-Animation

In diesem Beispiel wird eine benutzerdefinierte Markierer-Animation auf einen bearbeitbaren Absatz und ein Texteingabefeld angewendet.

HTML

Das Markup enthält ein <p>-Element und zwei text <input>-Elemente. Das <p>-Element hat das Attribut contenteditable gesetzt, um es bearbeitbar zu machen. Der Absatz und das erste Texteingabefeld haben die class-Eigenschaft custom-caret.

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

Zuerst definieren wir eine Menge von @keyframes, die die caret-color von transparent zu darkblue ändern.

css

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

  to {
    caret-color: darkblue;
  }
}

Dann stylen wir das <p> und das erste <input> mit der benutzerdefinierten @keyframes-Animation, einer caret-color, und einem caret-animation-Wert von manual, um das standardmäßige Markierer-Blinkverhalten auszuschalten.

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 folgendermaßen aus:

Versuchen Sie, sich auf die ersten beiden Elemente zu konzentrieren, um zu sehen, wie die benutzerdefinierte Markierer-Animation aussieht. Um es mit dem standardmäßigen blinkenden Markierer zu vergleichen, können Sie sich auf das dritte Element konzentrieren.