blinkender Text – über CSS erstellen

Von Zeit zu Zeit kommt die Frage, wie man Text in HTML blinken lassen kann. Früher gab es den HTML-Befehl <blink>, der dies ermöglichte. Dieser HTML-Befehl war nie ein Standard-Element und sollte so nicht genutzt werden.

Möchte bzw. muss man nun einen blinkenden Text auf der Website bringen, dann funktioniert das über CSS. Blinkender Text macht dann Sinn, wenn eine kurzfristige bzw. extrem Wichtige Information dem Leser unbedingt ins Auge springen muss.

Umsetzung in CSS

Folgendes Aussehen werden wir über CSS erstellen:

Erste Umsetzung:

.blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }    
}

Und jetzt kann jedem beliebigen CSS-Befehl die Klasse .blink zugewießen werden.

<p>Normaler Text und <span class="blink">blinkender Text</span> über CSS

Blinkdauer des Textes begrenzen auf 5 Sekunden

Blinkender Text kann schnell nerven! Auch nach den Web Content Accessibility Guidelines (WCAG) 2.0 dürfen blinkende Inhalte nicht länger als 5 Sekunden vom Inhalt ablenken.

Wir können über CSS auch hier eine Blinkdauer von 5 Sekunden einstellen und dann unseren Inhalt rot hinterlegt dargestellt lassen:

Im folgenden Beispiel wurde eine zeitlich begrenzte Animation für den HTML-Befehl <del>, der ideal ist um geänderte Termindaten anzuzeigen, über CSS integriert.

del { 
    border-radius: 0.2em;
    padding: 0.2em;

    animation-name: animation_blink_5s;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: 2.5;   
    animation-fill-mode: both;
}

@keyframes animation_blink_5s {
    0% {  
        background-color: white;
    }
    50% {  
        background-color: red;
    }
    100% {  
        background-color: white;
    }
}

Und der dazugehörige HTML-Aufbau

<p>Terminverschiebung: dieses Jahr anstelle 
des <del>24.12.</del> dann der <ins>25.12.</ins></p>

Beim Aufruf der Seite werden nun die mit <del> ausgezeichnete Inhalte fünf Sekunden blinkend dargestellt. Für den Lerneffekt läuft unsere Animation 2 ½ mal durch (animation-iteration-count: 2.5;). Nachdem ein Animationsdurchgang 2 Sekunden dauert (animation-duration: 2s;) haben wir eine Gesamtdauer von 2.5 * 2 = 5 Sekunden. Die Animation stoppt dann im Zustand 50% mit der Hintergrundfarbe Rot. Damit die Animation auch in diesem Zustand stehen bleibt, wird die Anweisung animation-fill-mode: both; benötigt. Genaueres zu den Animationsbefehlen von CSS im entsprechenden Kapitel.

Blinkender Text in den SERPs - ursprüngliches Easter-Egg bei Google

Möchte man eine blinkenden Texthölle erhalten, hat Google als Easter Egg 2014 blinkenden Text in den Suchmaschinenergebnissen eingeblendet. Das funktioniert weiterhin für die Suche von „HTML blink“ und „blink html“ – einfach einmal testen über https://www.google.de/search?q=blink+html

Der coole Effekt ist, dass dies auch nur über die Suche von „“ funktioniert. Somit hat ein Hersteller für Videoüberwachung das große Los gezogen, wenn danach gesucht wird (in Form vom veralteten HTML-Tag :).