Sie galten ja schon als ausgestorben. Und keiner wollte sie mehr haben.

Vor sehr vielen Jahren aber, so kurz nach den Anfängen des Internets, zu Zeiten des kommerziellen Durchbruchs waren sie allgegenwärtig:
Zuerst die animierten GIFs in Form von drehenden Logos und blinkenden Menüs und Buttons. Später dann die Flash-Webseiten und die damit einhergenden umfangreichen Animationen.

Die Flash-Technologie spielt heute keine Rolle mehr. Animationen aber wieder. Jahrelang waren sie eine Randerscheinung, aber inzwischen kommt kaum eine moderne Webseite ohne Animationen aus.

Was für ein Comeback – und sie sind wiedergekommen, um zu bleiben.

Animationen waren deshalb viele Jahre verpönt, weil sie als Spielerei verstanden und eingesetzt wurden. Als nettes Gimmick, was wenig Nutzen, aber dafür viel „Show“ bietet. Im Endeffekt aber den Besucher von der Bedienung abhält, bzw. sie unnötig erschwert.

Klar, dass ist auch heute noch auf Webseiten zu finden. Viel öfters aber werden Animationen eingesetzt, um die Bedienung zu erleichtern und um die User-Experience zu erhöhen. Animationen machen Webseiten ein Stück weit lebendiger.

jQuery und weitere JavaScript-Frameworks sorgten dafür, dass sich Animations-Effekte fast schon inflationsartig ausgebreitet haben. Und in den letzten Jahren ist dank CSS3 der Spielraum an Animationsmöglichkeiten erweitert worden.

CSS3 bietet also, was vorher nur mit JavaScript möglich war und geht sogar noch einen Schritt weiter: Recht schnell und einfach Animationen zu erstellen.

Dieser Artikel soll die Möglichkeiten von CSS3 aufzeigen schnell und einfach interessante Animationen und Effekte zu erstellen. Neben der technischen Umsetzung werden auch einige Beispiele und Einsatzgebiete vorgestellt.

Die Animationsmöglichkeiten mit CSS3

Eine Animation ist Veränderung und Bewegung. Unser ganzes Leben ist sozusagen „Animation“.

Auf Webseiten bedeutet Animation eine Veränderung eines Objektes. Das kann zum Beispiel heißen, dass sich das Objekt von A nach B bewegt, die Farbe ändert oder die Form.

Animation bedeutet auch, dass diese Veränderung nicht schlagartig, von einem Moment auf den anderen passiert, sondern mehr oder weniger langsam über mehrere Einzelschritte. Diese bemerkt der Beobachter im Normalfall nicht, da diese sehr schnell hintereinander ablaufen (wie im Kino).

CSS3 bietet also die Möglichkeit einzelne CSS-Eigenschaften über einen festgelegten Zeitraum zu verändern.

CSS Animation

Animationsablauf von einem Start- zu einem Endpunkt.

CSS3 bietet zwei Arten der Animation an:
Transitions & Animations

Die beiden Arten sind sich einerseits recht ähnlich. Es lassen sich damit…

  • bestimmen, welche CSS-Eigenschaft(en) animiert werden soll(en).
  • die Dauer der Animation festlegen.
  • die Geschwindigkeit der Veränderung einstellen (also z.B. linear oder zuerst schneller, dann langsamer).
  • festlegen, wann die Animation ausgefüht werden soll.

Der Unterschied liegt darin, wie sich die beiden Animations-Arten auslösen lassen, ob sie sich loopen (also wiederholen) lassen und wie umfangreich sich die Veränderung
einstellen lässt.

Schauen wir uns die beiden CSS3-Animations-Möglichkeiten genauer an:

CSS3 transitions:
Einfache Animationen und Übergänge

Transition ist ein Übergang von einem Anfangszustand in einen Endzustand. Die CSS-transitions sind in der Verwendung begrenzt. Die häufigste Einsatz ist mit der CSS-Pseudo-Klasse :hover. Dafür ist die Umsetzung recht einfach.

Typische Einsatzgebiete ist beispielsweise ein Button, der bei einem Mouseover animiert seine Hintergrundfarbe ändert. Also nicht schlagartig, sondern fließend.
Oder ein Link, dessen Textfarbe sich fließend ändert. Oder ein Vorschaubild, dessen Transparenz sich vergrößert.

CSS Animation hover

Typische transition:
Bei Mouseover verändert sich das Aussehen des Elements.

Um eine transition zu definieren, braucht es mindestens folgende beiden Angaben:

transition-property
Definiert die zu verändernde CSS-Eigenschaft (also z.B. Textarbe, Hintergrundfarbe oder Position).

transition-duration
Definiert die Animations-Dauer.

Für einen Beispiel-Button könnte der CSS-Code also folgendermaßen aussehen:


.button {
  background-color: #333;
  transition-property: background-color;
  transition-duration: 1s;
}
.button:hover {
  background-color: #555;
}

Diese Schreibweise ist übersichtlich.
Man kann die Anweisungen aber auch zusammenfassen in einer Kurzschreibweise:

transition: background-color 1s;

Die Animation wird ausgelöst, wenn sich der Mauszeiger über dem Button befindet. Die Veränderung der Hintergrundfarbe dauert dann eine Sekunde.

Ergänzend können noch folgende beiden Angaben definiert werden:

transition-timing-function
Die Animation verläuft üblicherweise linear, hiermit lässt sich der Geschwindigkeitsverlauf regeln. Es gibt weitere Werte, mit denen sich das Geschwindigkeitsverhalten beeinflussen lässt:

linearGleichbleibende Geschwindigkeit (also das gleiche Verhalten, als wenn keine Angabe erfolgt).
easeDie Transition beginnt kurz langsam, wird schnell und endet lange langsam.
ease-inDie Transition beginnt langsam, endet schnell.
ease-outDie Transition startet schnell, endet langsam.
ease-in-outDie Transition beginnt langsam, wird schnell und endet wieder langsam.

Und dann gibt es noch transition-delay. Hiermit lässt sich der Animationsbeginn verzögern.

Das Button-Skript könnte also folgendermaßen erweitert werden:


.button {
  background-color: #333;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: .5s;
}
.button:hover {
  background-color: #555;
}

Und die Kurzschreibweise dazu:

transition: background-color 1s ease-in-out .5s;

Es lassen sich nur bestimmte CSS-Eigenschaften mit den transitions steuern (display bspw. nicht). Eine Übersicht findet sich beim W3C – Properties from CSS.

Mit CSS3-Transitions lassen sich CSS-Eigenschaften über einen festgelegten Zeitraum verändern.

Browserkompatibilität

Um die Kompatibilität mit älteren Browsern zu gewährleisten, sollte man die entsprechenden Vendor-Prexifes einsetzen:


-webkit-transition: background-color 1s ease-in-out .5s; // Safari
-moz-transition: background-color 1s ease-in-out .5s; // Fireforx
-o-transition: background-color 1s ease-in-out .5s; // Opera
transition: background-color 1s ease-in-out .5s;

Keyframe-Animationen mit CSS3

Mit CSS3 lassen sich auch sogenannte Keyframe-Animationen erzeugen. Die Animation verläuft dann nicht mehr nur von einem Anfangs- zu einem Endzustand, sondern über mehrere Schlüsselbilder (die Keyframes), die Zwischenstände der Animation darstellen. Damit hat man eine größere Kontrolle über den Verlauf der Animation und können auch komplexere Veränderungen umsetzen. Dafür ist natürlich auch der Quellcode entsprechend umfangreicher/komplexer.

Der andere große Unterschied zu den transitions liegt darin, dass hier keine spezielle Interaktion des User (wie ein Mouseover) verlangt wird, sondern diese auch selbstädnig ablaufen können (z.B. direkt nach dem Laden der Seite).

CSS Keyframe Animation

Mit CSS3 Keyframes lassen sich komplexere Animationen mit Schlüsselbildern umsetzen.

Eine Keyframe-Animation besteht aus zwei Teilen:

1. Die @keyframe-Regel

Legt den Namen fest und bestimmt den Ablauf der Animation. Dazu werden Schlüsselbilder bestimmt (zumindest ein Anfangs- und Endzustand) und welche CSS-Eigenschaften sich verändern sollen.


@keyframes name-animation {
  from { 
         // Eigenschaften am Beginn der Animation
       }
  to { 
         // Eigenschaften am Ende der Animation
      }
 }

Dies ist eine simple Animation, die mit zwei Schlüsselbildern den Anfang und das Ende der Animation bestimmen.

2. Animations-Aufruf

Die Animations-Regel kann nun von beliebigen CSS-Selektoren aufgerufen werden. Sie verhält sich ein bisschen wie eine Variable beim Programmieren.


.name-selektor {
  animation-name: name-animation;  // Name der Animation
  animation-duration: 1s; // Dauer der Animation
  animation-iteration-count: infinite; // Anzahl der Wiederholungen
}

Mit Hilfe der Eigenschaft animation-name wird im Selektor die entsprechende Keyframe-Regel über ihren Namen aufgerufen.
Mit animation-duration wird die Dauer der Animation in Sekunden bestimmt.
Und mit animation-iteration-count wird die Anzahl der Wiederholungen bestimmt. infinite sorgt für unendliche Wiederholungen, alternativ lässt sich ein Zahlenwert eingeben.

Die Kurzschreibweise dazu wäre folgende:


.name-selektor {
  animation: name-animation 1s infinite; 
}

Daneben gibt es noch weitere Eigenschaften, mit denen der Animationsablauf gesteuert werden kann:

animation-timing-functionVerlauf der Animations-Geschwindigkeit. Standardwert ist ease.
animation-delayVerzögerung, des Starts der Animation. Standard ist 0.
animation-directionRichtung der Animation. Standard ist normal (also vorwärts). Alternativ gibt es reverse (rückwärts).
animation-fill-modeGibt an, ob die Veränderungen bei einer Pause oder nach der Animation sichtbar sind. Mögliche Werte sind none (Anfangsszustand) oder backwards (Zustand zu Beginn der Animation).

Die Kurzschrift der vielen Animations-Eigenschaften würde folgendermaßen aussehen:


.name-selektor {
  animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
}

Komplexere Animationen mit CSS3

Das spannende an den @keyframe-Regeln ist, dass nicht nur der Anfangs- und Endzustand definiert werden können, sondern auch beliebig viele Schlüsselbilder dazwischen. Bei mehr als zwei Bildern werden diese dann in Prozenten (auf der Zeitleiste) angegeben:


@keyframes name-animation {
  0% {
    // Eigenschaften am Beginn der Animation 
  }
  50% {
    // Eigenschaften in der Mitte der Animation
  }
  100% {  
    // Eigenschaften am Ende der Animation
  }
}

Im folgenden Beispiel werden über fünf Keyframes die Hintergrundfarbe und der border-radius verändert:

Die Syntax für CSS3-Animationen mit mehreren Keyframes enthält viel CSS-Code. Daß heißt allzu umfangreiche Animationen werden sehr schnell unübersichtlich und kaum noch zu überblicken. Vor allem lassen sich alleine mit CSS keine Abhängigkeiten schaffen, so dass beispielsweise eine Animation automatisch erst dann beginnt, wenn eine andere aufgehört hat. Hier wird man dann doch um JavaScript nicht herum kommen. Ebenso wenn man den Start der Animation zu einem bestimmten Zeitpunkt auslösen möchte (z.B. wenn der User an eine bestimmte Stelle gescrollt hat).

CSS3-Bibliotheken

CSS3-Keyframe-Animationen können nicht nur unübersichtlich werden, sondern auch schnell sehr aufwendig bei der Erstellung. Da man das Rad nicht immer neu erfinden muss, gibt es schon einige CSS3-Animations-Libraries. Also praktische Sammlungen von vorgefertigten CSS3-Effekten.

Man bindet ein Stylesheet ein und den Elementen, die animiert werden sollen, wird eine entsprechende CSS-Klasse zugewiesen. Bei einigen dieser Bibliotheken muss man auch ein JavaScript- oder jQuery-Skript einbinden, dies ist aber jeweils erklärt.

Typische Beispiele für den sinnvollen Einsatz solcher CSS3-Bibliotheken sind:

  • Button-Effekte
  • Bild-Titel-Animation
  • Seiten-Transitions
  • Pop-Up-Fenster
  • Off Canvas-Menüs bei responsiven Webdesigns

Es gibt einige Animations-Bibliotheken, folgende sind auf jeden Fall einen Blick wert:

Animate.css
Magic.css
Effeckt.css
Animatable

Performance

Bei Animationen gelangt man schnell an die Frage, wie „ruckelfrei“ diese ablaufen und wie es sich mit dem Ladezeit verhält.

Browser „zeichnen“ die Seite 60 Mal pro Sekunde, dass bedeutet ungefähr alle 16 Millisekunden werden die Elemente (neu) gezeichnet. Jede Veränderung durch Animationen müssen die Browser neu berechnen, was sehr aufwendig werden kann. Wird für ein „Frame“ länger gebraucht, wird das oder die nächsten ausgelassen, so kann es schon mal zu „Ruckungen“ kommen.

Bei der Neuberechnung geht der Browser vier Schritte durch, ein Wasserfall-Prinzip:

Das Browser Waterfall-Prinzip

Die vier Schritte des Browsers, um Elemente auf dem Bildschirm darzustellen.
Quelle: HTML5 Rocks – High Performance Animations

Die vier Schritte bedeuten im Detail:

Recalculate Style
Der Browser überprüft zuerst den Quellcode, ob sich Klassen, CSS-Styles oder Attribute bei Elementen geändert haben. Wenn ja, dann werden diese Elemente neu berechnet, einschließlich evtl. vererbter Elemente (also Kind-Elemente).

Layout
Der Browser berechnet dann die Größe und Position jedes Elements im Browserfenster.

Paint
Der Browser „zeichnet“ jedes Element mit seinen zugewiesenen Stilen auf einzelne Ebenen. Ähnlich vorstellbar wie Ebenen in Photoshop, die übereinander liegen.

Composite
Nachdem alle Elemente in Ebenen erstellt wurden, werden sie auf dem Bildschirm platziert. Das ist, als ob in Photoshop alle Ebenen in ein Bild gezogen würden.

Das Wasserfall-Prinzip bedeutet, je früher eine Veränderung stattfindet, umso mehr Arbeit hat der Browser, da es sich auf die folgenden Schritte auch auswirkt. Werden die Eigenschaften transform oder opacity verändert, hat er am wenigsten Arbeit.

Werden dagegen die Position (left, top) oder die Außmaße (width, height) verändert, dann muss der Browser auch die Schritte Layout, Paint und Composite durchgehen und neu bearbeiten.

Die Seite CSS Triggers bietet eine Übersicht, welche CSS-Eigenschaften an welcher Stelle im Wasserfall-Prozess anfängt.
Und diese Tabelle zeigt die beliebtesten CSS-Eigenschaften, die verändert werden – die meisten schon beim Layout.

Gerade mit Rücksicht auf mobile Endgeräte sollten also Animationen mit Bedacht eingesetzt werden, da hier die Rechenleistung geringer ist. Wer schon mit kleineren Bildschirmen surft, will nicht noch ruckelige Seiten bedienen müssen.

Tip:
Die Position und Größe eine Elements nicht mit left, top und width, height veränden, da diese eben schon beim Layout anfangen.
Stattdessen besser auf transform: translate (npx, npx) und transform: scale(n) setzen.

Fazit

Animationen können das Salz in der Suppe sein. Die wilden Flash-Zeiten sind vorbei. Aber Parallax-Effekte, hereinfliegende mobile Menüs oder animierte Mouseover-Effekte sind allgegenwärtig. Sie können die Benutzung erleichtern und das Benutzungserlebnis (die User Experience) erhöhen.

Mit den Animationen ist es wie überall im Leben:
In Maßen ja, nur nicht in Massen.

Mit CSS3-Animationen hat man schon einige tolle Möglichkeiten. Für einfache Animationen reichen die transitions. Wenn Animationen immer wieder abgespielt werden sollen oder etwas komplexer sein sollen (mit mehreren Schlüsselbildern), dann gibt es die @keyframe-Animationen. Und für „ganz wilde“ Sachen gibt es JavaScript.

Wenn du noch mehr über Animationen wissen willst, kann ich Dir folgende Artikel empfehlen:
The ultimate guide to Web animation
All About CSS Animations
High Performance Animations
Myth Busting: CSS Animations vs. JavaScript

Und jetzt zu Dir:
Konnte Dir der Leitfaden weiterhelfen oder vermisst du wichtige Aspekte?
Lasse es mich in den Kommentaren wissen!

Der Leitfaden für CSS3-Animationen
4.745 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter +
WEBDESIGN-CHECKLISTE
mit 90 Checkpunkten für
Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!
(Beispiele, Datenschutz, Analyse und Widerruf)

Autor:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog. Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

9 Kommentare

  1. Herzlichen Dank für den Artikel, der gerade sehr gut passt. Auf meiner Todo-Liste steht nämlich schon eine Weile: „Unbedingt mal mit etwas konsequenter mit CSS3-Animationen und Transitions beschäftigen!“ 🙂

    • Hallo Caro,
      freut mich, dass der Artikel passt. In naher Zukunft will ich noch einige Beispiele für nette CSS3-Animationen zeigen.
      Viele Grüße
      Martin

  2. Super Artikel, sehr hilfreich. Vielen Dank!

    • Freut mich!

  3. Sehr schöner und vor allem gut verständlicher Artikel. In der schule kam mir das so kompliziert vor das ich dachte: „ach so wichtig ist das doch nicht“. Jetzt habe ich eine wunderschöne (okay extrem einfache) Animation auf meiner Webseite.

    • Hi,
      freut mich, dass der Artikel dir geholfen hat!
      Gruss
      Martin

Trackbacks/Pingbacks

  1. Der Leitfaden für CSS3-Animationen - Freakinthecage Webdesign Stuttgart - Der Blog
  2. Lieblinks – März 2016 | CSS3 Animationen, Homepagebaukasten, Webdesign Showcases, SEO, Conversion, Facebook Like Button, Marketingplan
  3. Bilder optimieren fürs Web – Tools zur Bildoptimierung - Webdesign Journal

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!