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.

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.

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

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

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.

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.

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

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:

transform: rotate(30deg)

transform: scale(1.5)

transform: skew(15deg,
-15deg)

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.

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.

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).