Underline-webdesign.de
Sonstiges

Blinkenden Text mit HTML und CSS erstellen

· Redaktion

Für blinkenden Text brauchst du HTML und CSS. HTML enthält den Text, und eine CSS-Animation schaltet ihn sichtbar und unsichtbar. Das Beispiel blinkt zweimal und bleibt danach sichtbar.

Verwende den Effekt sparsam. Dauerhaftes Blinken lenkt ab und kann bei manchen Menschen Beschwerden auslösen. Wichtige Hinweise müssen auch ohne Animation gut erkennbar sein.

HTML und CSS einfügen

Gib dem Text im HTML eine Klasse. Im CSS verwendest du diese Klasse, um den Text zu gestalten:

<p>
  <span class="blink">Wichtiger Hinweis</span>
</p>

.blink {
  animation: blink 1s steps(1, end) 2;
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }

  50%, 99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink {
    animation: none;
  }
}

Füge den HTML-Teil an der gewünschten Stelle in deine Seite ein. Das CSS kommt in die CSS-Datei deiner Website oder in einen passenden <style>-Bereich im HTML.

So funktioniert die CSS-Animation

Die CSS-Regel .blink weist Text mit dieser Klasse die Animation blink zu. 1s gibt an, wie lange ein Durchgang dauert. steps(1, end) schaltet zwischen den Zuständen um, statt den Text weich ein- oder auszublenden. Die letzte Zahl 2 legt fest, dass die Animation zweimal läuft.

Der Abschnitt @keyframes blink legt fest, wann der Text während eines Durchgangs sichtbar oder unsichtbar ist. Bei einer Deckkraft (opacity) von 1 ist der Text sichtbar, bei 0 unsichtbar. Die Animation endet bei 100 % mit opacity: 1, damit der Hinweis danach lesbar bleibt.

Die Regel mit prefers-reduced-motion: reduce berücksichtigt eine Systemeinstellung, mit der Nutzerinnen und Nutzer weniger Bewegung auswählen. Wenn diese Einstellung aktiv ist, wird die Animation abgeschaltet und der Text bleibt sichtbar.

Dauer und Wiederholungen ändern

Für eine kürzere oder längere Animation änderst du die Dauer. Mit animation: blink 1s steps(1, end) 2; läuft sie zweimal für jeweils eine Sekunde. Eine höhere Wiederholungszahl lässt den Effekt häufiger laufen.

Für eine dauerhaft wiederholte Animation kannst du statt einer Zahl infinite eintragen:

.blink {
  animation: blink 1s steps(1, end) infinite;
}

Ein Endlosblinken läuft, solange das Element angezeigt wird. Biete immer eine Möglichkeit, die Bewegung anzuhalten oder auszublenden. Bei blinkenden Inhalten, die länger als fünf Sekunden laufen, verlangt die WCAG eine Steuerungsmöglichkeit, sofern keine Ausnahme greift. Die Abfrage für reduzierte Bewegung ersetzt diese Steuerung nicht.

Warum text-decoration: blink ungeeignet ist

Die CSS-Eigenschaft text-decoration kennt den Wert blink, aber Browser setzen ihn unterschiedlich um. Deshalb erhältst du damit kein verlässliches Ergebnis in verschiedenen Browsern. Mit einer CSS-Animation über @keyframes legst du Dauer, Sichtbarkeit und Wiederholungen direkt fest.

Für einen einfachen Blinkeffekt mit begrenzter Dauer brauchst du kein JavaScript. Wenn Nutzerinnen und Nutzer eine dauerhafte Animation selbst pausieren oder stoppen sollen, muss die Seite dafür eine passende Steuerung bieten.

Blinken zugänglich einsetzen

Blinkender Text kann ablenken und bei Menschen mit Epilepsie, Migräne, vestibulären Beschwerden oder kognitiven Einschränkungen Beschwerden auslösen. Verwende deshalb nur einen kurzen Effekt. Wichtige Informationen müssen auch ohne Blinken verständlich bleiben.

Für schnelle Lichtblitze gelten in der WCAG eigene Grenzwerte. Mehr als drei Blitze pro Sekunde können diese Grenzwerte überschreiten. Die Zahl der Blitze pro Sekunde allein genügt jedoch nicht, um den Effekt vollständig zu prüfen. Verlass dich deshalb bei der Prüfung eines Effekts auf deiner Website nicht allein auf eine langsame Animation oder eine Systemeinstellung.

Weitere Artikel