Die Revolution der Animation im Web

Animationen im Internet entwickeln sich ebenso weiter, wie der Rest der digitalen Welt. In diesem Artikel erfahren Sie, wie aktuelle Animation mit Hilfe von CSS3 umgesetzt werden können. Neben der Möglichkeit diese selber zu programmieren gibt es auch Software mit der entsprechende Animationen realisierbar sind. Sie werden in diesem Artikel an einigen Praxisnahen Beispielen den Umgang mit CSS3 Animationen lernen, sowie Software entdecken, mit der sich HTML5 und CSS3 Animationen umsetzen lassen.

Wer kennt sie nicht, die Ursprünge von Animationen im Internet? Meist handelte es sich hier um blinkende, hüpfende oder drehende GIF Grafiken. Mein persönlicher Favorit der alteingesessenen GIF-Animationen ist das drehende und hüpfende @-Zeichen, mit Verknüpfung auf Email-Adressen oder Kontaktformulare. Leider gibt es immer noch zu viele Webseiten, die diese oder ähnliche Grafiken verwenden. Doch diese liegen in der Regel weit entfernt von jeder professionellen Linie.

Seit dem Siegeszug der Smartphones, vor allem dem iPhone von Apple im Jahre 2007 ist der neue HTML5 und CSS3 Standard immer wichtiger geworden. Der bis dato häufig verwendete Standard für Animationen oder interaktive Webseiten Flash verlor immer mehr an Bedeutung. In der heutigen Zeit spielen vor allem JavaScript (z.B. mit Hilfe von jQuery, einer JavaScript Bibliothek, die unteranderem das Erstellen von Animation relativ einfach macht) und CSS3 eine große Rolle im Animationsbereich.

Animationen über JavaScript bieten vor allem den Vorteil, dass auch ältere Browser hier nicht ausgeschlossen werden (zumindest teilweise). CSS3 hingegen bietet vorrangig zwei Animationstypen, zum einen einfache Übergangseffekte (Transitions) und zum anderen komplexere Animationen über CSS3 Animation und Keyframes.

Um Animationen wirklich problemlos und möglichst abwärtskompatibel zu halten, erfordern die meisten CSS3 Effekte entsprechende Vendor-Prefixes (Vendor-Prefixes definieren CSS-Eigenschaften für einen ganz speziellen Browser) wie z.B. -moz-, -webkit-, -ms- und -o-.

Der Internet Explorer von Microsoft hing bei diesen Themen immer etwas hinterher, in der Version 10 versucht der IE hier allerdings aufzuschließen.

CSS3 Transitions in der Praxis

CSS3 Transitions lassen sich mittlerweile schon relativ problemlos verwenden, gerade für einfache Mouseover-Effekte oder um die Webseite generell in einigen Bereichen abzurunden.

Aber was genau versteht man eigentlich unter einer CSS3 Transition? Stellen Sie sich eine CSS3 Transition wie eine fließende Veränderung (Animation) auf einer vorgegebenen Zeitachse vor. Bei einem normalen Mouseover (:hover) über einen Link springt die Farbe sofort von dem einen in den anderen Zustand. Mit einer entsprechenden Transition wechselt die Farbe in der vorgegebenen Animationszeit von der einen Farbe in die andere.

Im folgenden Beispiel wird der Farbwechsel des Links von dunkelgrau zu orange animiert:

a{
    color:#333;
    text-decoration:none;
    -webkit-transition:color 500ms linear;
    -moz-transition:color 500ms linear;
    -o-transition:color 500ms linear;
    transition:color 500ms linear;
}
 
a:hover{
    color:#ff5100;
    text-decoration:none;
}

In dem Beispiel ist das Funktionsprinzip von CSS3 Transition sehr gut und einfach zu erkennen. Es gibt in dem obigen Beispiel  drei Eigenschaften nach »transition:«, davon sind zwei Pflicht und eine ist optional. Ein weitere Eigenschaft, die ebenfalls optional ist fällt in dem obigen Beispiel unter den Tisch:

transition: transition-property transition-duration [transition-timing-function] [transition-delay]

Die Eigenschaften in den [eckigen Klammern] sind optional.

transition-property: Gibt an, welche Eigenschaft animiert werden soll z.B. „color“ für die Text-Farbe (um alle Eigenschaften zu animieren, kann an dieser Stelle „all“ verwendet werden)

transition-duration: Steht für die Dauer der Animation in Millisekunden(ms) oder Sekunden(s).

[transition-timing-function]: Hier lässt sich das Geschwindigkeitsverhalten des Übergangs auf der Zeitachse festlegen.

Folgende Werte sind möglich:
ease (Standardwert): Transition startet langsam, nimmt schnell Geschwindigkeit auf und endet wieder langsam.

ease-in: Transition startet langsam und endet schnell.

ease-out: Transition startet schnell und endet langsam.

ease-in-out: Transition startet und endet langsam, dafür ist die Geschwindigkeit im mittleren Teil am höchsten.

linear: Die gesamte Transition läuft in der gleichen Geschwindigkeit ab.

[transition-delay]: Start-Verzögerung der Animation in Sekunden oder Millisekunden.

Die einfache Animation bzw. Übergangseffekt bei einem Farbwechsel ist nun nicht wirklich spektakulär, doch in Kombination mit weiteren CSS3 Funktionen lassen sich hier sehr ansprechende Effekte bauen.

In Kombination mit CSS3 Transforms lassen sich hier nette Effekte erzielen, z.B. schöne Mouseover-Effekte für Bilder, Logos oder andere Elemente der Webseite.

Mit Transforms lassen sich, wie der Name es schon vermuten lässt, Elemente transformieren. Dazu gehören z.B. Rotationen (rotate), Positionsverschiebungen (translate), Skalierung von Elementen (scale) und letztendlich auch das Verzerren (skew).

Auch wenn Transforms nicht direkt zu Animationen mit CSS3 gehören, aber ein wesentlicher Bestandteil sein können, möchte ich hier noch ein kleines Beispiel für eine Rotation mit Transition zeigen.

Hier haben wir ein Rechteck in rot, dieses wird beim Mouseover (:hover) um 45° gedreht und die Farbe wechselt nach grün:

HTML-Teil:

<div id="example"></div>

CSS-Teil:

#example{
    width:113px;
    height:113px;
    background:#f00;
    transition:all 2s ease;
    -ms-transition:all 2s ease;
    -webkit-transition:all 2s ease;
    -o-transition:all 2s ease;
    -moz-transition:all 2s ease;
}
 
#example:hover{
    background: #090;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

Animationen mit CSS3 »animation« und »@keyframes«

Dies ist die mächtigste Art um Animationen mit CSS umzusetzen, denn hier besteht ein großer Spielraum an Möglichkeiten.

Es lassen sich einzelne Keyframes auf einer individuellen Zeitachse erstellen. Um das Ganze besser zu verdeutlichen, hier einen kurzer Vergleich zu Flash und Bewegungs-Tweens, da es so einfacher zu verdeutlichen und die Oberfläche von Flash nicht unbekannt ist.

In Flash gibt es die Möglichkeit auf der Zeitachse zwei Keyframes anzulegen. Zwischen dem ersten und zweiten Keyframe liegen z.B. 25 „normale“ Frames. Jetzt ist es möglich ein Objekt in dem ersten Keyframe zu positionieren und dieses im zweiten Keyframe an eine ganz andere Stelle zu setzen. Der Bewegungs-Tween zwischen den zwei Keyframes animiert nun automatisch den Weg des Objekts vom ersten zum zweiten Keyframe.

So kann man sich auch die Animation mit CSS3 vorstellen, die Transitions haben ja auch genau den oben beschriebenen Effekt.

Mit CSS3 »animation« und »@keyframes« lassen sich allerdings nicht nur Animationen von Zustand A nach B realisieren, sondern beliebig viele Zwischenzustände definieren.

Am besten lässt sich das ganze hier an einem kleinen Beispiel erklären, dieses werde ich an dieser Stelle allerdings nur auf Webkit Browser beschränken um den Code schlank zu halten.

Der folgende Code zeigt ein Rechteck, das seine Farbe wechselt, sich dabei in einen Kreis verwandelt und in einer viereckigen Form über den Monitor fliegt:

HTML-Code:

<div id="box"></div>

CSS-Code:

@-webkit-keyframes boxAnimation{
    0%{
        margin:0 0 0 0px;
        -webkit-transform:rotate(0deg);
        background-color:#999;
    }
 
    25%{
        margin:0 0 0 800px;
        -webkit-transform:rotate(360deg);
    }
 
    50%{
        margin:500px 0 0 800px;
        -webkit-transform:rotate(0deg);
        border-radius:180px;
        background-color:#f00;
    }
 
    75%{
        margin:500px 0 0 0px;
        -webkit-transform:rotate(360deg);
        background-color:#0f0;
    }
 
    100%{
        margin:0 0 0 0;
        -webkit-transform:rotate(0deg);
        border-radius:0px;
        background-color:#999;
    }
 
}
 
#box{
    width:120px;
    height:120px;
    background:#999;
    -webkit-animation-name:boxAnimation;
    -webkit-animation-duration:10s;
    -webkit-animation-timing-function:ease-out;
    -webkit-animation-iteration-count:infinite;
}

Die Prozentwerte in dem Beispiel (0%, 25%, 50%, 75% und 100%) stehen für die jeweiligen Keyframes. Insgesamt haben wir in diesem Beispiel also 5 Keyframes, wobei der erste bei 0% die Startwerte des Objektes beschreibt.

Mit den »margin« (Außenabstand) Werten wird die Position des Objektes beeinflusst, über »border-radius« (abgerundete Ecken) wird das Rechteck zum Kreis und umgekehrt, »transform« lässt das Rechteck rotieren und »background-color« ist letztendlich für den Farbwechsel zuständig.

Bei der ID #box wird über »animation-name« das Keyframe-Set zugewiesen, mit »animation-duration« die Länge der Animation festgelegt, »animation-timing-function« hat dieselbe Funktion wie »transition-timing« (siehe oben) und mit der letzten Eigenschaft »animation-iteration-count« wird festgelegt, dass die Animation unendlich oft wiederholt wird.

Dieses kleine Beispiel sollte bereits die umfangreichen Funktionen von CSS3 Animationen verdeutlichen.

CSS3 Animationen softwaregestützt erstellen

Auch die Software-Industrie ist auf den Zug aufgesprungen, Software Gigant Adobe hat mit Edge Animate ein leistungsstarkes Tool an der Hand, mit dessen Hilfe umfangreiche HTML5 und CSS3 Animationen erstellt werden können.

Mithilfe der Einleitungs-Videos auf AdobeTV, kann man mit etwas Einarbeitungszeit einen schnellen Einstieg in Edge finden.

Wer bereits vorher Erfahrungen mit Adobe Flash gemacht hat, sollte sich auch in Edge gut einfinden können.

Doch nicht nur Adobe hat Software für moderne HTML5 und CSS3 Animationen im Produktportfolio. Auch kleinere Softwarefirmen bieten gute Lösungen für WebAnimationen. Im Mac AppStore von Apple tummeln sich z.B. auch diverse Tools, die für kleines Geld gute Ergebnisse liefern, am beliebtesten ist hier aktuelle die App »Hype«.

Für Windows möchte ich an dieser Stelle auf den A5 HTML5 Animator von Data Becker hinweisen.

Alle Tools spucken nach dem Export entsprechende HTML5 und CSS3 Dateien aus, teilweise kommen auch noch einige JavaScript Dateien dazu.

Diese Dateien können schlussendlich in die eigene Webseite überführt werden.

Gerade für einfache Übergangseffekte oder kleine Animationen ist man jedoch mit ein paar Zeilen CSS-Code schneller, als mit Animationssoftware.

Tools und kleine Helfer

Im Internet gibt es einige Tools, die Entwicklern die Arbeit mit CSS3 erleichtern, auch im Hinblick auf Animationen.

Unter den Tools finden sich vor allem kleine Generatoren für CSS-Eigenschaften mit Dropdowns der Werte z.B. für Transitions. Ebenfalls ein großer Vorteil ist die umfangreiche Ausgabe der Code mit sämtlichen wichtigen Vendor-Prefixes.

Hier kann ich folgende Seiten empfehlen:

» html5css3box.com

» css3generator.com

Wer seinen Code lieber selber schreiben möchte, kann auch hier etwas Arbeit einsparen. Einfach nur die vom W3C vorgeschriebenen CSS Eigenschaften verwenden und danach komfortabel mittels prefixmycss.com sämtliche Vendor-Prefixes hinzufügen lassen.

Generell eignen sich CSS3 Animationen bereits für viele Web-Projekte, sollten aber im großem Stil nur mit bedacht gewählt werden, da es immer noch sehr Updateträge Zielgruppen im Hinblick auf moderne Webbrowser gibt. Es ist daher ratsam, Webseiten für eine breiter Zielgruppe, nicht essentiell von CSS3 Animation abhängig zu machen. Für moderne Webseiten allerdings bieten CSS3 Animationen einen großen Umfang an Möglichkeiten diese aufzuwerten.