Für Animationen auf Webseiten war früher einzig JavaScript und animierte GIFs eine praktikable Methode. Mit CSS3 ändert sich das und HTML-Elemente lassen sich einfach animieren.
Inhaltsverzeichnis
CSS-Animationen dezent einsetzen und den Nutzer nicht nerven
Animationen auf Webseiten sind nicht neu. In den 90er Jahren besonders beliebt waren rotierende E-Mail-Schriftzüge um pixelige Erdbälle, unheimlich lustige Animationen schlecht gezeichneter Tiere usw.
Dem Webseitenbauer hat’s gefallen, der Besucher es schon vorher tausende Male gesehen.
Insgesamt nervt auf Webseiten nichts mehr, als Animationen auf die man als Nutzer keinen Einfluss hat. Da mag sich der Intent-Layer noch so schwungvoll auf den Bildschirm hieven, wenn er mir beim Lesen im Weg steht, nervt das. Auch selbststartende Videos deren Ton direkt losbrüllt gehören absolut dazu.
Worauf der letzte Absatz hinaus möchte: wenn du planst Animationen einzusetzen, dann tue das mit Feingefühl, ohne den Nutzer zu verwirren oder zu nerven. Denn Animationen können durchaus Sinn machen.
Ideen für sinnvolle Animationen auf Webseiten
Welche Aufgabe können animierte HTML-Elemente erfüllen? Da gibt es so einige. Versetzen wir uns in die Lage eines Shopbesuchers der einen Artikel in den Warenkorb legt. Landet der Artikel im Warenkorb, kann dieser blinken oder durch ein Wackeln auf sich aufmerksam machen.
Aktivierte Formularfelder können größer werden, sobald sie vom Nutzer aktiviert werden, der Button mit den Sonderangeboten in der Hauptnavigation kann alle paar Sekunden ein wenig nervös zappeln um mehr Aufmerksamkeit auf sich zu ziehen.
So, genug gefaselt. Jetzt geht’s los.
Ein Element zum animieren
Was für ein HTML-Element animiert wird, ist egal. Das kann ein Bild, ein Text oder auch ein DIV sein. Zu Testzwecken habe ich einfach mal ein blaues Quadrat in die Mitte des Bildschirmes gesetzt. Und dieses soll nun animiert werden.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
html{ height: 100%; display: table; width: 100%; } body { display: table-cell; vertical-align: middle; text-align: center; } #quadrat { width: 200px; height: 200px; background-color: lightblue; margin: 0 auto; } |
Der zugehörige HTML-Code:
|
1 2 3 |
<div id="quadrat"> </div> |
Der häufigste Anwendungsfall eine Animation auszulösen, ist das Berühren des Elementes mit dem Mauzeiger. Hier greift dann die Pseudoklasse :hover.
Das ist nett, auf Mobilgeräten allerdings nicht sonderlich nützlich, weil es ja keinen Mauszeiger gibt. Um Animationen auf Mobilgeräten zu ermöglichen, bietet sich daher die Pseudoklasse :focus an, die reagiert, wenn das Element angeklickt wurde und z.B. auf eine Eingabe wartet.
transform: Mit CSS HTML-Elemente skalieren, drehen, neigen
Um eine Animation mit einem HTML-Element ausführen zu können, benötigt es einen Anfangs- und einen Endzustand. Der Ausgangszustand ist unser Quadrat, den Endzustand legen wir jetzt fest:
|
1 2 3 4 5 |
#quadrat:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); transform: scale(1.25); } |
Damit weiß der Browser: berührt der Mauzeiger das Quadrat, soll etwas ausgeführt werden. Die CSS-Anweisungen vergrößern (scale = skalieren) das Quadrat um den Faktor 1,25.
Das funktioniert auch in die umgekehrte Richtung:
|
1 2 3 4 5 |
#quadrat:hover { -webkit-transform: scale(.5); -moz-transform: scale(.5); transform: scale(.5); } |
Das Quadrat verkleinert sich mit diesen Anweisungen.
Aber nicht nur skalieren ist möglich. Auch Drehungen lassen sich einfach realisieren:
|
1 2 3 4 5 |
#quadrat:hover { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } |
Auch Neigungen bzw. Verzerrungen sind mit der Angabe skew möglich:
|
1 2 3 4 5 |
#quadrat:hover { -webkit-transform: skew(20deg, 10deg); -moz-transform: skew(20deg, 10deg); transform: skew(20deg, 10deg); } |
Der erste Wert in den Klammern gibt die Neigung um die X-Achse an, der zweite für die Y-Achse.
So weit, so gut. Doch eine Animation ist das ja noch nicht wirklich, oder?
Stimmt, darum machen wir jetzt den Übergang zwischen Start- und Endzeitpunkt flüssiger.
CSS-Animation mit transition
Das Zauberwort für eine flüssige Animation lautet transition und wird im Ausgangszustand des HTML-Elements angegeben.
transition verfügt über insgesamt drei Parameter.
Parameter 1 definiert, was animiert werden soll. Steht dort all, werden alle Eigenschaften des HTML-Elements animiert (background, border usw.). Diese lassen sich auch gesondert festlegen.
Der zweite Parameter bestimmt die Zeit, die eine Animation dauern soll. Die Angabe erfolgt in Sekunden. Mit dem Dezimalpunkt lassen sich auch halbe Sekunden angeben (0.5 oder 1.5).
Parameter Nummer Drei bestimmt den Ablauf der Animation. Hier stehen folgende Möglichkeiten zur Verfügung: ease, linear, ease-in, ease-out, ease-in-out.
Die Angabe ease startet die Animation langsam, läuft in der Mitte etwas schneller und endet wieder langsam.
Genug der Theorie, hier ein Beispiel:
|
1 2 3 4 5 6 7 8 9 |
#quadrat { width: 200px; height: 200px; background-color: lightblue; margin: 0 auto; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; transition: all 1.5s ease; } |
In Kombination mit einem von unseren oben definierten Hover-Effekten geschieht die Transformierung der HTML-Elements nun nicht mehr abrupt, sondern ganz geschmeidig.
Und das auch im Rückwärtsgang. Wird die Maus wieder vom HTML-Element wegbewegt, bewegt sich auch unser Quadrat mit der Animation wieder in den ursprünglichen Zustand zurück.
Damit sind die Möglichkeiten von CSS-Animation noch nicht ausgeschöpft. Die transition-Angabe ist auch ohne transform verwendbar. Unterscheidet sich der Hover-Effekt eines Textlinks beispielsweise lediglich in der Farbe, ist mit der ease-Angabe hier auch ein sanfter Wechsel der Farbe möglich.
Beispiel für das Pseudoelement :focus
Wie oben schon geschrieben, sind Hover-Effekte auf Mobilgeräten nur schwer einsetzbar. Dafür lässt sich das Pseudoelement :focus einsetzen.
Hier ist das allerdings das Beispiel mit dem Quadrat nicht mehr sinnvoll, denn nur wenige Nutzer tippen auf ihrem Smartphone einfach so auf irgendeine Fläche der Webseite. Darum gibt es hier ein Beispiel mit einem Formularfeld, welches beim Antippen bzw. Aktivieren seinen Zustand ändert.
Es muss also ein Formularfeld vom Typ input angelegt werden:
|
1 |
<input type="text" name="formularfeld"> |
Mit diesem CSS-Code werden gleichzeitig alle im Dokument vorhandenen Formularfelder vom Typ input=text angesprochen:
|
1 2 3 4 5 6 7 8 9 |
input[type=text]{ font-size: 16px; padding: 5px; margin: 5px; border: 1px solid #aaa; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } |
Die Informationen für die Animation sind auch bereits hinterlegt, jetzt wird noch der Endzustand definiert, wenn das Eingabefeld den Fokus erhält:
|
1 2 3 4 5 |
input[type=text]:focus{ padding: 10px; background-color: lightblue; border: 1px solid #000; } |
Erhält das Feld nun den Fokus, wird also angeklickt oder angetippt, vergrößert sich der Innenabstand des Feldes (padding), der Hintergrund wechselt von weiß zu hellblau (background) und der Rahmen (border) wird von hellgrau zu schwarz. Das alles passiert zugleich in einer sanften Animation.
Wird beim Ausgangszustand bei der transition statt all nur background angegeben, bezieht sich die Animation nur auf die Hintergrundfarbe. Rahmen und Innenabstand wechseln dann sofort und ohne Animation ihren Zustand.
Komplexere Animationen mit Keyframes
Die Animationsmöglichkeiten mit CSS wurden hier nur kurz angerissen. Diese denen dem Nutzer als Feedback. Hier wurde geklickt oder berührt, hier kann ich jetzt mit interagieren.
Aber CSS3 ermöglicht auch komplexere Animationen mit Hilfe von Keyframes. Beispielhaft sei hier mal die Seite mit den CSS-Schütteleffekten erwähnt.
