kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Getippter Text mit CSS-Animationen

Wenn der Eindruck erweckt werden soll, als würde ein Text getippt, wird häufig auf JavaScript zurückgegriffen. Wir haben selbst einige Tools zu diesem Zweck zusammengetragen. Doch der Effekt lässt sich auch mit einer CSS Keyframe-Animation erstellen. In diesem Beitrag zeigen wir wie es geht und was sich dennoch mit JavaScript optimieren lässt.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Die ch-Einheit und der Monospace-Font

Die Einheit ch definiert in CSS eine Breite, die der Null (0) in der gewählten Schriftart entspricht. Bei einem Monospace-Font sind alle Buchstaben gleich breit. Das machen wir uns zu nutze, indem wir die Länge des Textes von der Breite 0 auf die Breite 48ch animieren. Die 48 kommt hier zustande, da der Text des folgenden Beispiels eine Länge von 48 Zeichen umfasst.

steps()

In einer CSS-Keyframe-Animation kann die timing-function in steps() angegeben werden. Die steps()-Funktion legt fest, wie viele Abstufungen zwischen zwei Schlüsselbildern erzeugt werden sollen. Wenn wir die Anzahl der steps() mit der Anzahl der Buchstaben (48 in unserem Beispiel) gleich setzen, und gleichzeitig die Breite des Textes von 0 auf 48ch animieren, erscheinen die Buchstaben einzeln nacheinander.

white-space: no-wrap;

Wenn der Text aus mehreren Wörtern besteht, bricht die Animation am Leerzeichen ab. Nach dem Leerzeichen werden dann immer ganze Wörter eingeblendet, nicht mehr einzelne Buchstaben, wie eigentlich gewünscht. Mit Hilfe von white-space: no-wrap; beheben wir das Problem.

<h1 class="animated-text">Danke für deinen Besuch auf kulturbanause.de =:)</h1>
.animated-text {
 font-family: monospace;
 overflow: hidden;
 height:1.1em;
 word-wrap: break-word;
 white-space: nowrap;
 animation: typing 4s steps(48) forwards;
}

@keyframes typing {
  from { 
    width: 0;
  }

  to { 
    width: 48ch;
  }
}

Beispiel anschauen

Animation mit JavaScript vereinfachen

Etwas lästig an der oben beschriebenen puren CSS-Variante ist, dass die Anzahl der Buchstaben (48) manuell zwei Mal im Code notiert werden muss: Einmal innerhalb der animation-Eigenschaft und einmal innerhalb der @keyframes.

Mit ein wenig JavaScript (jQuery) können wir Anzahl der Zeichen innerhalb des Selektors .animated-text automatisch auslesen.

var character_count = $('.animated-text').text().length;

Anschließend bauen wir die Zeichenzahl innerhalb der animation-Eigenschaft wieder ein, und ergänzen den Selektor .animated-text entsprechend.

$('.animated-text').css('animation', 'typing 4s steps(' + character_count + ') forwards').css('font-family', 'monospace');

Die @keyframes statten wir ebenfalls mit der ausgelesenen Zahl aus und fügen im <head> einen Style-Abschnitt ein, der die @keyframes-Regel beinhaltet.

$('<style>@keyframes typing {from {width: 0; } to {width: ' + character_count + 'ch; } }</style>').appendTo('head');

 

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. thomas

    Verfasst am 15. September 2016 um 14:38 Uhr.

    Danke….Ich hab’s noch nicht durchgespielt.

    Eine Frage stellt sich: Wie sieht das mit Zeilenumbruch aus??

    • Jonas Hellwig

      Verfasst am 16. September 2016 um 17:00 Uhr.

      Ich habe es jetzt auch noch nicht ausprobiert. Aber ich denke der Zeilenumbruch macht bei der CSS-Lösung Ärger. Dann würde ich wahrscheinlich eher eines der oben im Artikel verlinkten JS-Tools verwenden.

  2. Felix Scholze

    Verfasst am 7. Oktober 2016 um 16:28 Uhr.

    Toller Artikel Jonas!
    Konnte ich ohne Probleme außerhalb von WordPress nachstellen.

    Die Variante mit JavaScript funktioniert leider nicht mit WordPress. So ist es auf jeden Fall bei mir.

    Habe es versucht in mein selbst erstelltes Genesis Theme einzubauen. Ohne Erfolg da, das Script die inline style werte nicht schreibt.

    Vielleicht mache ich etwas falsch.

  3. Grafiker

    Verfasst am 10. Februar 2017 um 9:25 Uhr.

    Bin gerade durch Zufall auf deinen Blog gestoßen, schaue mich gerade etwas um. Hier findet man wirklich viele hilfreiche Artikel :) Vielen Dank für den Beitrag und den Tipp mit der CSS-Keyframe-Animation. Das werde ich mir auf jeden Fall einmal genauer ansehen.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.