caret-animation

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 Eigenschaft caret-animation wird als eines der unten aufgeführten Schlüsselwörter festgelegt.

auto

Der Cursor blinkt ein und aus. Dies ist der Standardwert.

manual

Der Cursor blinkt nicht.

Formale Definition

Formale Syntax

caret-animation = 
  auto    |
  manual  

Beispiele

Grundlegende Verwendung von caret-animation

Dieses Beispiel zeigt den Unterschied zwischen caret-animation auf auto und manual an einem editierbaren Element.

HTML

Das Markup enthält zwei <p>-Elemente mit dem contenteditable Attribut, 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 den Wert von caret-color auf red. Dann wird dem ersten Paragraphen ein caret-animation Wert von auto und dem zweiten Paragraphen ein caret-animation Wert von manual zugewiesen.

p {
  caret-color: red;
}

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

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

Resultat

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 editierbaren Paragraphen und ein Texteingabefeld angewendet.

HTML

Das Markup enthält ein <p>-Element und zwei Text <input>-Elemente. Das <p>-Element hat das contenteditable Attribut, um es editierbar zu machen. Der Paragraph und das erste Texteingabefeld haben eine class mit dem Wert custom-caret.

<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

Wir definieren zuerst 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;
  }
}

Dann gestalten wir das <p> und das erste <input> mit der benutzerdefinierten @keyframes Animation, einer caret-color und einem caret-animation Wert von manual, um das Standard-Blinkverhalten des Cursors 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;
}

Resultat

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äßigen blinkenden Cursor zu vergleichen, fokussieren Sie das dritte Element.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• caret-color
• CSS grundlegendes Benutzeroberflächenmodul modul