14 Animationen 

Animationen sind für Webseiten ein wenig wie das Salz in der Suppe. Der geschickte Einsatz von Animationen und Effekten gibt einer Webseite das gewisse Etwas, zu viel ist störend, irritierend, »schmeckt einfach nicht«. Bei zu wenig davon kann es jedoch auch schnell langweilig werden. In diesem Kapitel geht es um den wohldosierten Einsatz von Animationen mithilfe von CSS und JavaScript/jQuery.
14.1 Animationen mit CSS 

Die größte Interaktivität, die CSS jahrelang liefern konnte, war der hover-Effekt, also die unterschiedliche Darstellung eines Elements bei einem Mouseover. Dieser ruckartige Wechsel, sobald die Maus das Element berührte, wurde hauptsächlich eingesetzt, um Links deutlicher hervorzuheben. Diese Animationen mit :hover wirkten wie ein An-/Aus-Schalter. Der hover-Effekt tut damit zwar seinen Dienst, aber die Bedürfnisse sind gestiegen, und die technischen Möglichkeiten haben sich verbessert.
14.1.1 »hover«-Effekte mit CSS3-Transitions 

Mit CSS3 ist es nun möglich, Elemente auch zu animieren. Dies kann die Aufmerksamkeit stärker auf bestimmte Elemente lenken und außerdem die User Experience (siehe Kapitel 3, »Konzeption und Strategie«) verbessern.
Transitions-Eigenschaften
Es sind gut 40 Eigenschaften, die sich mit CSS-Transitions verändern lassen, von background-color über opacity bis z-index. Der W3C bietet einen Überblick: w3.org/TR/css3-transitions/#animatable-css. Der animierte Wechsel von display:none zu display:block funktioniert allerdings nicht.
Mit den sogenannten CSS3-Transitions lassen sich einfache Animationen realisieren. Über einen festgelegten Zeitraum wird der Zustand eines Elements verändert. So lassen sich beispielsweise weiche Übergänge auch ohne den Einsatz von JavaScript oder Flash realisieren. Alle modernen Browser bis auf den Internet Explorer 9 unterstützen die transition-Eigenschaft. Um die Animation mit Transitions zu beeinflussen, stehen verschiedene CSS3-Eigenschaften zur Verfügung:
Abbildung 14.1 Ein netter Mouseover-Effekt – aus Quadraten werden Kreise bei namesforchange.org.
CSS3-Eigenschaft |
Bedeutung |
---|---|
transition-property |
Angabe der Eigenschaft(en), die verändert werden soll(en). all bezieht sich auf alle animierfähigen Eigenschaften. |
transition-duration |
Angabe der Dauer für den Übergang (kann in Millisekunden oder Sekunden angegeben werden) |
transition-delay |
Angabe einer Verzögerung, bis der Übergang einsetzt (in Millisekunden oder Sekunden). Wird in der Praxis seltener eingesetzt, da der Anwender sofort merken soll, dass eine Animation stattfindet. |
transition |
Kurzschreibweise, mit der alle Werte in einer Anweisung geschrieben werden können |
transition-timing- |
Veränderung des zeitlichen Ablaufs des Übergangs. Folgende Schlüsselwörter sind möglich: ease-in – langsamer Anfang, schnell am Ende ease-in-out – langsamer Anfang, langsames Ende, in der Mitte schneller ease – normaler Anfang, normales Ende, dafür in der Mitte beschleunigt ease-out – schneller Anfang, langsam am Ende cubic-bezier – Feintuning in Form einer definierten mathematischen Bézierkurve |
Tabelle 14.1 Die CSS3-Transitions-Eigenschaften
Ein typischer Anwendungsfall für CSS3-Transitions sind Buttons und Navigationspunkte. Anstelle eines normalen ruckartigen Übergangs bekommen diese so einen weichen Übergang, was für den Betrachter angenehmer wirkt. Die allgemeine Definition sieht folgendermaßen aus:
.element {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
Listing 14.1 Allgemeine transition-Definition
Um für einen Button einen weicheren Übergang zu definieren, könnten die Angaben wie folgt aussehen:
a{
background-color: #00a0db;
transition: background-color 0.75s ease;
}
a:hover{
background-color: #00374f;
}
Listing 14.2 transition-Definition für eine Änderung der Hintergrundfarbe
Download
Das Transition-Beispiel »CSS3-transitions.html« finden Sie unter Beispielmaterial • Kapitel_14.
Anstatt alle Eigenschaften einzeln aufzulisten, können sie auch in einer Kurzschrift zusammengefasst werden. Dabei werden im Element (hier der Link) der Ausgangswert (die Hintergrundfarbe) und die Art des Übergangs (die Transition) definiert. Im hover-Zustand wird dann der Endwert definiert. Zwischen Ausgangs- und Endwert verläuft dann die Animation. In der Transition muss dann entsprechend angegeben werden, welche Eigenschaft (hier also background-color) verändert werden soll.
Abbildung 14.2 Das Webdesign-Blog codrops bietet immer wieder tolle Codebeispiele, so auch hier für nette Buttonanimationen: tympanus.net/Development/CreativeButtons.
Abbildung 14.3 Verschiedene Beispiele für Transitions
Manche Browserversionen unterstützen CSS-Eigenschaften schon, bevor sie Standard werden. Um diese Eigenschaften als Webdesigner einzusetzen, gibt es die Browserpräfixe. Für die transition-Eigenschaft sehen die Präfixe folgendermaßen aus:
-webkit-transition: background-color 0.75s ease;
-moz-transition: background-color 0.75s ease;
-ms-transition: background-color 0.75s ease;
-o-transition: background-color 0.75s ease;
transition: background-color 0.75s ease;
Listing 14.3 Die transition-Eigenschaft mit allen Browserpräfixen
Das sieht nach sehr viel Schreibarbeit aus. Die Kontrolle bei caniuse (caniuse.com/#search=transition) zeigt, dass das Präfix -webkit ausreicht, um ältere Browser anzusprechen.
-webkit-transition: background-color 0.75s ease;
transition: background-color 0.75s ease;
Listing 14.4 Die transition-Eigenschaft mit dem notwendigen Browserpräfix
Browserunterstützung
caniuse.com/#search=transition zeigt, welche Browser unterstützt werden und für welche Präfixe eingesetzt werden sollten.
Wichtig ist vor allem zu sehen, dass der Internet Explorer vor Version 10 die transition-Eigenschaften NICHT unterstützt. In unserem kleinen Beispiel hätte das nur die Konsequenz, dass der Button eben nicht weich animiert dargestellt würde, sondern wie ein normaler Link mit hover-Zustand, was vertretbar wäre. Animationen sollten also in diesem Fall keine allzu wichtigen Inhalte transportieren, die für Anwender älterer IE-Versionen nicht sichtbar wären.
Should i prefix?
Ein Präfix einzusetzen ist eher lästig. Die Webseite shouldiprefix.com gibt einen Überblick, welche neuen CSS-Eigenschaften Präfixe brauchen, und liefert diese dann gleich mit.
Die CSS-Transitions werden bei allen Arten von Mouseover-Zuständen eingesetzt – in der Navigation, um das Dropdown-Menü (siehe Abschnitt 12.1.4, »Dropdown-Menü«) einzublenden, bei Links und Buttons sowie bei Teasern, vor allem bei Bild-Teasern, um Text beim Mouseover anzuzeigen.
Abbildung 14.4 typehype.com ist voller dezenter transition-Animationen – hier sehen Sie z. B. ein Dropdown-Menü (oben) und Teaser-Bilder (unten).
SCHRITT FÜR SCHRITT
Bilder-»hover«-Effekte
Gerne werden (Bilder-)Teaser bei einem Mouserover animiert. Eine leicht animierte Veränderung zeigt dem Anwender optisch noch besser, dass dies ein Link ist, und verbessert das Nutzungserlebnis. Es gibt verschiedene Möglichkeiten, Elemente zu animieren. Weiter unten werden noch weitere vorgestellt, in diesem Tutorial werden wir uns auf Transitions konzentrieren.
Download
Die Datei »CSS3-teaser-hover.html« finden Sie unter Beispielmaterial • Kapitel_14.
1 HTML-Struktur
Zuerst bauen wir eine HTML-Struktur auf. Ein verlinktes Bild kommt in einen div-Container:
<div class="teaser" id="teaser-1">
<a href="#"><img src="http://lorempixel.com/300/300/business/" alt="Teaser-Text 1"></a>
</div>
Listing 14.5 Die HTML-Struktur mit einem div-Container
Über die Klasse und ID könnten wir den Container formatieren und animieren.
Abbildung 14.5 Zwei Kreis-Teaser mit animiertem Mouseover-Effekt
2 CSS-Struktur
Die folgende CSS-Formatierung konzentriert sich auf die wichtigsten Eigenschaften. Als Beispiel wählen wir eine Vergrößerung des Bildes, bei der eher hereingezoomt wird und die Ausmaße des Bildes nicht verändert werden.
Zuerst wird der Container definiert. Dazu gehört neben der Größe und der Formatierung als Kreis die Eigenschaft overflow:hidden. Diese verhindert, dass die Bilder über den Container hinausragen, selbst wenn sie größer sind als der Container:
.teaser{
margin-bottom: 40px;
border-radius: 50%;
width: 300px;
height: 300px;
overflow: hidden;
}
Listing 14.6 Ecken abrunden mit border-radius
Dann wird das Bild formatiert und bekommt feste Maße (Höhe und Breite), damit klar ist, was animiert werden soll, und dazu die transition-Einstellungen.
#teaser-1 img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
Listing 14.7 Mit transition einen weichen Übergang erstellen
Und als hover-Effekt werden dann nur die Maße des Bildes per CSS verändert:
#teaser-1 img:hover {
width: 350px;
height: 350px;
}
Listing 14.8 Definition des hover-Zustands
Fertig ist der kleine Mouseover-Effekt. Im Ordner Beispielmaterial • Kapitel_14 befindet sich der komplette Quellcode samt einem weiteren Beispiel mit horizontaler Bildverschiebung.
14.1.2 CSS3-Transform – Verzerren, Skalieren und Drehen 

Mit der CSS3-Eigenschaft transform lassen sich Elemente in der Lage und Form verändern. Zusammen mit transition können so Animationen und Effekte umgesetzt werden, die vorher nur mit Flash oder JavaScript möglich waren.
Abbildung 14.6 Ein kleiner interaktiver Guide durch unser Sonnensystem dank CSS3: codepen.io/juliangarnier/pen/idhuG
Wird ein HTML-Element per transform verändert, bleibt es trotzdem im HTML-Fluss. Es kann aber passieren (z. B. beim Skalieren), dass es sich mit anderen überlagert, ähnlich der relativen und absoluten Positionierung. Der verfügbare Raum und die umgebenden Elemente sollten also für ein transformiertes Element mit eingeplant werden. Wichtig ist noch die Unterscheidung in 2D- und 3D-Transforms.
2D-Transforms | Die 2D-Transforms werden von modernen Browsern unterstützt. 3D-Transforms unterstützt der Internet Explorer 10 nur teilweise, und ältere IE-Versionen tun das überhaupt nicht. Zur Unterstützung älterer Browserversionen sollten Sie die Vendor-Präfixe einsetzen:
-ms-transform: rotate(30deg); /* IE < 10*/
-webkit-transform: rotate(30deg); /* chrome und safari*/
-moz-transform: rotate(30deg); /* firefox */
-o-transform: rotate(30deg); /* opera */
transform: rotate(30deg); /* explorer > 9 */
Listing 14.9 CSS3-Transform mit Präfixen
Download
Sie finden die verschiedenen Transform-Beispiele »CSS3-transforms.html« unter Beispielmaterial • Kapitel_14.
Abbildung 14.7 Auf der Webseite zum Buch finden Sie verschiedene transform-Beispiele.
Nach der transform-Eigenschaft wird die Funktion mit den Werten in Klammern angegeben. Mehrere Transforms werden direkt hintereinander – durch ein Leerzeichen getrennt – angegeben:
transform:rotate(-15deg) scale(1.5);
Listing 14.10 Mehrere Transforms in einer CSS-Deklaration
Auch negative Werte sind hier möglich. Im oberen Beispiel wird das Bild dann entgegen dem Uhrzeigersinn gedreht. Folgende 2D-transform-Eigenschaften sind möglich:
2D-»transform«-Eigenschaft |
Bedeutung |
Beispiel |
---|---|---|
rotate (Drehen) |
Dreht das Objekt. Werte von 0° bis 360° |
transform: rotate(30deg) |
scale (Vergrößern) |
Skaliert das Objekt. Mit einem Wert proportional, bei zwei Länge und Breite. 1 bedeutet 100 %. 2 vergrößert um 200, und 0.5 verkleinert um 50 %. |
transform: scale(1.5) |
skew (Verzerren) |
Verzerrt das Objekt mit Werten von 0 bis 180deg bzw. –180deg. Ein Wert gemeinsam für x- und y-Achse oder zwei getrennt |
transform: skew(15deg, |
translate (Verschieben) |
Verschiebt das Element um n Pixel nach rechts und unten, bei negativen Werten nach links und oben. |
transform: rotate(30deg) |
Tabelle 14.2 Überblick über die HTML5-2D-transform-Elemente
Abbildung 14.8 Wow, CSS-Transitions und -Transforms im Einsatz bei bevisionare.com
Abbildung 14.9 Noch einmal Wow: Auch kok-au-vin.be setzt auf CSS-Transitions und -Transforms.
3D-Transforms und Keyframe-Animationen | 3D mit CSS? Ja, das geht tatsächlich, und vermutlich werden einige ganz feuchte Hände dabei bekommen. Die Möglichkeiten sind aber natürlich keineswegs mit üblichen 3D-Programmen zu vergleichen, auch können keine 3D-Objekte aus anderen Programmen eingebunden werden. In Bezug auf einen Fluchtpunkt können die Elemente in einem dreidimensionalen Koordinatensystem ausgerichtet und verzerrt werden. Die Seite mediaevent.de/css/transform.html gibt Ihnen einen tieferen Einblick.
Download
Sie finden das Transform-Beispiel »CSS3-transforms.html« unter Beispielmaterial • Kapitel_14.
Abbildung 14.10 Für Buttons, Links und Navigationspunkte gut geeignet sind die Creative Link Effects (tympanus.net/Development/CreativeLinkEffects).
Abbildung 14.11 Hover.css bietet viele hover-Effekte als Vorlage (ianlunn.github.io/Hover).
Und dann gibt es noch die Möglichkeit der Keyframe-Animation, wie man es von Flash oder Videoschnittprogrammen gewohnt ist. Während eine Transition-Animation genau zwei Keyframes hat (einen Ausgangs- und einen Endpunkt), lassen sich mit CSS-Animationen beliebig viele Schlüsselbilder einfügen. Die Animation läuft dann von Schlüsselbild zu Schlüsselbild, und es kann noch festgelegt werden, ob sie sich am Ende wiederholen soll, zurücklaufen soll oder einfach zu Ende ist.
Die beiden Blogbeiträge the-art-of-web.com/css/3d-transforms und webdesign-journal.de/css3-animationen-leitfaden erklären das Keyframe-Prinzip ausführlicher mit vielen praktischen Beispielen. Die Animation-Keyframe-Eigenschaft ist sehr mächtig. Von kleinen Animationen für Buttons über Bilder-Slideshows bis zu komplexen Trickfilmen ist damit vieles möglich.
Unterstützung von 3D-Transforms und Keyframe-Animations
Aufgrund der noch geringen Unterstützung in vielen üblichen Browsern sind die 3D-Transforms und Keyframe-Animations noch nicht so weit verbreitet. Aber es kann davon ausgegangen werden, dass sie in den nächsten Jahren an Bedeutung gewinnen und wir noch einige spannende Einsatzgebiete kennenlernen werden.
Abbildung 14.12 Das CSS3 Hover Effects Pack liefert jede Menge interessante hover-Effekte zum Lernen, Ausprobieren und Übernehmen (gudh.github.io/ihover/dist/index.html).