Animationen mittels CSS 3 sind mittlerweile eine gängige Methode, die von vielen Websites im Internet verwendet wird. So nutzt z.B. der Newsfeed von Facebook CSS, um bestimmte Elemente zu animieren, wenn man durch Beiträge nach unten oder oben scrollt. Sie lässt sich mit einfachen CSS-Stylesheets schnell umsetzen, ohne dass du Code in Javascript schreiben musst (was allerdings einige CSS-Kenntnisse voraussetzt).

In diesem Blogbeitrag erfahren Sie, wie Sie CSS3 aber auch jQuery für einfache Animationen verwenden können. Außerdem gebe ich Ihnen ein paar Tipps und Tricks, wie Sie Ihre Animationen flüssiger, natürlicher und weniger ablenkend gestalten können.

Dieser Artikel richtet sich in erster Linie an Webentwickler, die gerade erst mit Animationen beginnen oder neue Wege zur Animation ihrer Website erkunden wollen. Die Beispiele in diesem Artikel können direkt in Ihren eigenen Projekten verwendet werden, ohne dass Änderungen erforderlich sind!

CSS Animationen haben viele Vorteile gegenüber JavaScript-Animationen:

  • Leichtere Lernkurve
  • Schnellere Entwicklungszeit/Postproduktionszeit
  • Weniger Code in CSS-Stylesheets im Vergleich zu JavaScript-Dateien erforderlich
  • Leichtgewichtiger; beeinträchtigt nicht die Ladegeschwindigkeit von Seiten wie schwere Skripte (Javascript)

Diese Eigenschaften machen CSS3 Animationen zu einer besseren Wahl für Webentwickler, die eine einfachere Methode mit weniger Aufwand wünschen. Animationen mit CSS werden daher immer beliebter als Javascript-Animationen. CSS ist leichter zu erlernen und schneller zu implementieren, was CSS-Animationen zur bevorzugten Methode für Webentwickler macht.

CSS-Animationen

CSS3 bringt Animationen mit sich, die auch von den meisten Browsern (oft mit jeweiligen Browser-Präfix) angenommen werden. Außnahmen sind hier der Internet Explorer 8 und 9, sowie Opera Mini. Werden die CSS Animationen im Browser nicht unterstützt, wird einfach nichts angezeigt. Man sollte also beim Verwenden darauf achten.

Grundsätzlich aber bringt die CSS Animation Vorteile gegenüber Javascript Animationen. Zum einen wird sie vom Browser gesteuert, das heißt ihre Performance ist deutlich besser. Der Browser weiß ob das Fenster, in dem die Animation gezeigt wird gerade sichtbar ist oder nicht, und kann so die Frequenz drosseln oder eben nicht. Außerdem braucht man kein Javascript-Wissen und keine weiteren Plugins, um eine Animation in einer Webseite einzubauen.

Eine Animation lässt ein Element allmählich von einem Stil zu einem anderen wechseln. Sie können so viele CSS-Eigenschaften ändern, wie Sie wollen, und zwar so oft Sie wollen. Um CSS-Animationen zu verwenden, müssen Sie zunächst einige Keyframes für die Animation festlegen. Keyframes legen fest, welche Stile das Element zu bestimmten Zeiten hat.

Beispiele mit animate;

Zuerst einmal definiert man die Darstellung der Animation in der Funktion @keyframes. Hier kann man Prozente festlegen, wie sich die Animation an diesem Punkt verhalten soll, oder aber nur wie es am Anfang bzw. am Ende aussehen soll. Dabei können so viele Styles übergeben werden, wie man möchte. Im Anschluss definiert man noch die „animation“-Eigenschaft, in der festgelegt wird, wie sich die Animation verhalten soll.

@-webkit-keyframes letsmove { 0% {background:red; left:0px; top:100px; opacity:1;} 25% {background:yellow; left:200px; top:100px;} 50% {background:blue; left:200px; top:300px;} 75% {background:green; left:0px; top:300px; opacity:0;} 100% {background:red; left:0px; top:100px;} }
@-moz-keyframes letsmove { 0% {background:red; left:0px; top:100px; opacity:1;} 25% {background:yellow; left:200px; top:100px;} 50% {background:blue; left:200px; top:300px;} 75% {background:green; left:0px; top:300px; opacity:0;} 100% {background:red; left:0px; top:100px;} }
@keyframes letsmove { 0% {background:red; left:0px; top:100px; opacity:1;} 25% {background:yellow; left:200px; top:100px;} 50% {background:blue; left:200px; top:300px;} 75% {background:green; left:0px; top:300px; opacity:0;} 100% {background:red; left:0px; top:100px;} }

Was passiert hier?

Am Anfang hat unser Element die Hintergrundfarbe rot und sitzt oben links in der Ecke mit einer Transparenz von 100%. Das Element bewegt sich nun im Viereck: von links nach rechts, nach unten, nach links und wieder nach oben. Dabei ändert sich die Farbe und die Transparenz geht, bis sie links unten ist, auf 0 % zurück.

@-webkit-keyframes changeColor { from {color:yellow;} to {color:turquoise;} } 
@-moz-keyframes changeColor { from {color:yellow;} to {color:turquoise;} } 
@keyframes changeColor { from {color:yellow;} to {color:turquoise;} }

Was passiert hier?

Hier ändert sich lediglich die Textfarbe von Gelb nach Türkis. Wie lang das genau dauert und wie sich die Animation verhält, werden dann im CSS-Teil des zu animierenden Elements festgelegt (nächster Punkt).

Damit die Animation dann auch sichtbar wird, sollte man der zu animierenden Klasse noch Sub-Eigenschaften hinzufügen.

Diese sind folgende:

animation-name: String;
Name, der dann in der @keyframes-Regel verwendet wird

animation-duration: time; 
Dauer der Animation, Zeitangabe, z.B: 1s, 5s

animation-timing-function: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n);
Legt Timing mit Bezierkurven fest

animation-delay: time;
Zwischenzeit nach vollständigem Laden und Start der Animation
Zeitangabe in Sekunden (s) oder Millisekunden (ms)
Bei negativer Zahl, startet die Animation bereits vor dem Laden

animation-iteration-count: number | infinite;
Anzahl der Wiederholungen, Zahl

animation-direction: normal | reverse | alternate | alternate-reverse;
Richtung nach der Animation, nochmal wie zuvor oder zurück

animation-fill-mode: none | forwards | backwards | both;
Welche Styles vor und nach dem Ausführen der Animation auf animiertes Element angewendet werden

animation-play-state: paused | running;
Pausieren oder Starten der Animation

.box { width:200px; height:200px; position:absolute; background-color:red; -webkit-animation: letsmove 5s ease-in 2; -moz-animation: letsmove 5s ease-in 2; animation: letsmove 5s ease-in 2; }

Was passiert?

Ausgeführt werden soll @keyframe letsmove, die Animation dauert 5 Sekunden, klingt etwas nach und wiederholt sich 2 mal.

h1 { -webkit-animation: changeColor 2s ease 1s infinite alternate; -moz-animation: changeColor 2s ease 1s infinite alternate; animation: changeColor 2s ease 1s infinite alternate; }

Was passiert?

Ausgeführt werden soll @keyframe changeColor, die Animation dauert 2 Sekunden, verhält sich linear, fängt erst nach 1 Sekunde an, dauert unendlich lang und fängt dann nicht wieder am Anfang an, sondern geht zurück, läuft also rückwärts

Beispiele mittels Transitions

Transitions können verwendet werden, wenn sich zum Beispiel die Breite oder die Höhe eines Element verändern soll, wenn sich die Maus auf dem Element befindet. Beziehungsweise wenn sich irgendetwas ändern soll, sobald man über das Element hovert. Sobald sich die Maus nicht mehr über dem Element befindet, setzt sich das Element mit den gleichen Parametern wieder in den Grundzustand zurück:

.box { width:200px; height:200px; position:absolute; background-color:red; -webkit-transition-property: width; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease; -webkit-transition-delay: 1s; transition-property: width; transition-duration: 2s; transition-timing-function: ease; transition-delay: 1s; } .box:hover { width:400px; }

Was passiert?

Wenn sich die Maus über dem Element befindet, startet nach einer Sekunde eine Animation, die linear verläuft, es ändert sich die Breite des Elements bis 400px und das ganze dauert 2 Sekunden. 

Mann kann aber auch mehrere verschiedene Animationen gleichzeitig machen:

.box { width: 100px; height: 100px; background-color: deeppink; -webkit-transition: width 0.5s, height 2s, -webkit-transform 2s, background-color 3s; transition: width 0.5s, height 2s, transform 2s, background-color 3s; }
.box:hover { width: 200px; height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); background-color:turquoise; }

Was passiert hier?

Hier werden Breite, Höhe, Winkel und Hintergrundfarbe animiert. Die Box hat Anfangs eine Breite und Höhe von 100px, und eine Hintergrundfarbe von deeppink. Sobald sich die Maus über der Box befindet, dreht sich die Box einmal um sich selbst, wird breiter und höher und die Farbe ändert sich. Die Breite dauert insgesamt nur eine halbe Sekunde, bis sie die Breite hat, die in .box:hover definiert wird. Höhe und Winkel brauchen 2 Sekunden. Die Farbe braucht 3 Sekunden.

Oldschool: Animationen mittels jQuery

Aber auch JavaScript, bzw. die Bibliothek jQuery, bietet einfache Animationsmöglichkeiten. Darin gibt es bereits fertige Funktionen, wie zum Beispiel animate() oder slideToggle(). Die jQuery-Bibliothek ist eine äußerst beliebte JavaScript-Bibliothek, die früher zur Erstellung von Animationen für das Web verwendet wurde.

Um jedoch modernen Standards und Best Practices zu entsprechen, ist es für Entwickler an der Zeit, jQuery nicht mehr zu verwenden, wenn sie Code schreiben, der im Browser ausgeführt werden soll.

Vorsicht: Wenn du Elemente auf einer Seite mit jQuery animierst, verschlechtert sich die Leistung, da der Browser überlastet wird, wenn zu viele Elemente auf einmal vorhanden sind.

Wichtig: Um jQuery zu nutzen, muss zuerst das jQuery in das HTML Dokument eingebunden werden. Man kann es sich entweder herunterladen und einbinden, oder über die Google Libraries dafür verwenden.

Mit der Animate-Funktion kann man relativ einfach ein Element animieren. Zuerst wird ein Element im CSS definiert (Größe und Position). Anschließend kann man die Parameter, die sich bei der Animation verändern sollen, sowie die Dauer der Animation mitübergeben. Wenn man allerdings Farben ändern möchte, braucht man das Color-Animator-Plugin, das man sich extra herunterladen muss.

Das Prinzip ist folgendes: Man legt für jeden Keyframe einen Style fest, anschließend gibt man noch die Dauer der Animation an (optional).

Also: animate({ styles }, time);

"use strict";
$(document).ready(function() {
 $(".box_js").animate({ left: "600px", backgroundColor: "yellow", opacity:0.75 }, 1250).animate({ top: "300px", backgroundColor: "blue", opacity:0.3 }, 1250 ).animate({ top: "300px", left: "400px", backgroundColor: "green", opacity: 0 }, 1250 ).animate({ top: "100px", backgroundColor: "red", opacity: 1, }, 1250 );
});

Was passiert hier?

Das gleiche wie bei der CSS Animation mit der Box oben: Am Anfang hat unser Element die Hintergrundfarbe rot und sitzt oben links in der Ecke mit einer Transparenz von 100%. Das Element bewegt sich nun im Viereck: von links nach rechts, nach unten, nach links und wieder nach oben. Dabei ändert sich die Farbe und die Transparenz geht, bis sie links unten ist, auf 0 % zurück.

Wenn man nur kleinere Animationen braucht, wie zum Beispiel etwas performant anzeigen und wieder verschwinden lassen, eignen sich die jQuery Funktionen show() / hide() und slideToggle():

show()
Hier wird das Element auf display:“block“ gestellt, wenn man zusätzlich noch eine langsame Zeit oder „slow“  
dazuschreibt, sieht man dazu noch einen Effekt, dass sich das Bild von links oben langsam aufbaut.

hide()
Das selbe wie show() nur umgekehrt (das Element verschwindet)

slideToggle() 
Das Element verkleinert sich, wenn es sichtbar ist, nach oben, bis es nicht mehr sichtbar ist. Wenn es nicht sichtbar ist, 
vergrößert es sich nach unten.

Fazit

Ich würde Dir heutzutage empfehlen, Animationen direkt mit CSS3 zu realisieren!

CSS3 Animationen sind erstens super, wenn man eben schnell eine Animation in seine Webseite einbringen möchte, und kein Javascript beherrscht. Der wichtigste Vorteil ist jedoch die Zeitersparnis nicht nur bei der Entwicklung, sondern auch bei der Nachbearbeitung, denn es sind keine zusätzlichen CSS-Klassen, die für jedes Element der Animation hinzugefügt werden müssen. CSS-Animationen sind außerdem leichter als Javascript, was bedeutet, dass sie die Ladegeschwindigkeit deiner Seite nicht verlangsamen. CSS3 ist zudem noch leicht zu erlernen und anzuwenden – du kannst CSS-Stylesheets einfach auf HTML-Elemente anwenden, ohne selbst Code zu schreiben. Insbesondere für längere Animationen ist CSS übersichtlicher, da hier alle Keyframes in einer Funktion stehen. Bei jQuery müssen die Keyframes jeweils einzeln angelegt werden.

Zu dieser Einschätzung gibt es jedoch zwei Ausnahmen

  1. Wer noch möchte, dass seine Webseite auch schön im Internet Explorer 9 und niedriger angezeigt wird, sollte auf jQuery zurückgreifen.
  2. Komplexere Animationen, die zu einem bestimmten Event gestoppt werden oder reagieren sollen sind nur mit JavaScript/jQuery möglich.

Der Gestaltung sind keine Grenzen gesetzt.

Viel Spaß beim selbst ausprobieren! Inspirationen, und was sonst noch alles möglich ist, gibt’s hier.