caret-animation CSS property

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 caret-animation Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben.

auto

Der Cursor blinkt an und aus. Dies ist der Standardwert (initialer Wert).

manual

Der Cursor blinkt nicht an und aus.

Formale Definition

Formale Syntax

caret-animation = 
  auto    |
  manual  

Beispiele

Grundlegende Nutzung von caret-animation

Dieses Beispiel zeigt den Unterschied zwischen der Einstellung von caret-animation auf auto und manual bei einem bearbeitbaren Element.

HTML

Das Markup enthält zwei <p> Elemente mit der contenteditable Einstellung, um sie bearbeitbar 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 den caret-color Wert auf red. Es gibt dann dem ersten Absatz einen caret-animation Wert von auto und dem zweiten Absatz einen Wert von manual.

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, die beiden Absätze zu fokussieren, um den Unterschied im Cursorverhalten zu sehen.

Erstellen einer benutzerdefinierten Cursoranimation

In diesem Beispiel wird eine benutzerdefinierte Cursoranimation 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 contenteditable Attribut gesetzt, um es bearbeitbar zu machen. Der Absatz und das erste Texteingabefeld haben die class custom-caret gesetzt.

<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 Reihe von @keyframes, die die caret-color von transparent zu darkblue ändern.

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

  to {
    caret-color: darkblue;
  }
}

Wir stylen dann 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 Blinken des Cursors zu deaktivieren.

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

Versuchen Sie, die ersten beiden Elemente zu fokussieren, um die benutzerdefinierte Cursoranimation zu sehen. Um sie mit dem standardmäßig blinkenden Cursor zu vergleichen, können Sie das dritte Element fokussieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• caret-color, caret-shape
• caret Kurzschreibweise
• CSS Basic User Interface Modul