Diecaret-animation-Eigenschaft inCSS wird verwendet, um das Blinken desEinfügemarkers zu aktivieren oder zu deaktivieren. Der Einfügemarker ist das sichtbare Zeichen in editierbaren Elementen, das anzeigt, wo das nächste Zeichen eingefügt oder gelöscht wird.

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

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;

Werte

Die Eigenschaftcaret-animation wird als eines der unten aufgeführten Schlüsselwortwerte angegeben.

auto

Der Einfügemarker blinkt ein- und aus. Dies ist der Standardwert.

manual

Der Einfügemarker blinkt nicht ein- und aus.

Formale Definition

Formale Syntax

caret-animation =
auto|
manual

Beispiele

Grundlegende Verwendung voncaret-animation

Dieses Beispiel zeigt den Unterschied zwischencaret-animation aufauto undmanual bei einem editierbaren Element.

HTML

Der Markup enthält zwei<p>-Elemente mit dem Attributcontenteditable, um sie editierbar zu machen.

<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 dencaret-color-Wert aufred. Es gibt dem ersten Absatz einencaret-animation-Wert vonauto und dem zweiten Absatz einencaret-animation-Wert vonmanual.

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

Ergebnis

Das gerenderte Ergebnis sieht wie folgt aus:

Versuchen Sie, die beiden Absätze zu fokussieren, um den Unterschied im Verhalten des Einfügemarkers zu sehen.

Erstellen einer benutzerdefinierten Einfügemarker-Animation

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

HTML

Der Markup enthält ein<p>-Element und zwei Text-<input>-Elemente. Das<p>-Element hat das Attributcontenteditable, um es bearbeitbar zu machen. Der Absatz und das erste Texteingabefeld haben eineclass voncustom-caret.

<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

Zuerst definieren wir eine Reihe von@keyframes, die diecaret-color vontransparent zudarkblue ändern.

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

Dann stylen wir das<p>- und das erste<input>-Element mit der benutzerdefinierten@keyframes-Animation, einercaret-color und einemcaret-animation-Wert vonmanual, um das standardmäßige Einfügemarker-Blinkverhalten auszuschalten.

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

Ergebnis

Das gerenderte Ergebnis sieht wie folgt aus:

Versuchen Sie, die ersten beiden Elemente zu fokussieren, um die benutzerdefinierte Einfügemarker-Animation zu sehen. Um den Vergleich mit dem standardmäßigen blinkenden Einfügemarker zu sehen, können Sie das dritte Element fokussieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• caret-color,caret-shape
• caret abgekürzt
• CSS basic user interface Modul