CSS3 Transitions, Transforms und Animations: So nutzt du die anspruchsvollen Webtechnologien
Die Ursprünge von Animationen im Internet sind mittlerweile schon ein Klassiker: blinkende, hüpfende oder sich drehende GIF-Grafiken. Mein persönlicher Favorit dieser Ära der GIF-Animationen ist das sich drehende und hüpfende @-Zeichen – inklusive Verknüpfung zu E-Mail-Adressen oder Kontaktformularen. Selbst heute gibt es leider immer noch zu viele Websites, die diese oder ähnliche Grafiken verwenden. Moderne, professionelle Animationen sehen anders aus.
Denn mit dem Siegeszug der Smartphones (allen voran das iPhone) haben HTML5 und CSS3 an Bedeutung gewonnen, Flash als Klassiker unter den Animationstechnologien hingegen verloren. Heute spielen im Animationsbereich vor allem CSS3 sowie JavaScript eine große Rolle.
Letzteres zum Beispiel mit Hilfe der JavaScript-Bibliothek jQuery, die unter anderem das Erstellen von Animation vereinfacht. Animationen mittels JavaScript bieten vor allem den Vorteil, dass auch ältere Browser zumindest teilweise nicht ausgeschlossen sind. CSS3 hingegen bietet vorrangig zwei Animationstypen: zum einen einfache Übergangseffekte (Transitions) und zum anderen komplexere Animationen über CSS3 Animation und @keyframes.
Um Animationen problemfrei und möglichst abwärtskompatibel zu halten, erfordern die meisten CSS3-Effekte entsprechende Vendor-Präfixe wie -moz-, -webkit-, -ms- oder -o-. Diese definieren die CSS-Eigenschaften für spezielle Browser. Der Internet Explorer (IE) von Microsoft hinkt bei diesen Themen bekanntermaßen immer etwas hinterher. In der Version 10 versucht der IE hier allerdings aufzuschließen.
CSS3 Transitions
CSS3 Transitions lassen sich mittlerweile schon relativ einfach verwenden, gerade für einfache Mouseover-Effekte oder andere kleine Effekte, die eine Website generell abrunden können. Aber was genau versteht man unter einer CSS3 Transition? Nun, man kann sie sich wie eine fließende Veränderung (Animation) auf einer vorgegebenen Zeitachse vorstellen. Bei einem normalen Mouseover (:hover) springt etwa die Farbe ohne Zeitverzögerung von einem in den anderen Zustand, sobald man mit der Maus über das entsprechende Element fährt. Bei einer Transition wechselt die Farbe hingegen in einer zuvor festgelegten Animationszeit von der einen in die andere Farbe. Der folgende CSS3-Code animiert zum Beispiel einen Farbwechsel eines Links von dunkelgrau zu orange:
Farb-Transition bei Mouseover
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; }
Listing 1
In diesem Beispiel ist das Funktionsprinzip von CSS3 Transition sehr gut und einfach zu erkennen. Es gibt drei Eigenschaften nach „transition:“. Davon sind zwei Pflicht und eine ist optional. Eine weitere Eigenschaft, die ebenfalls optional ist, fällt hierbei allerdings unter den Tisch:
Weitere Transition-Optionen
transition: transition-property transition-duration [transition-timing-function] [transition-delay]
Listing 2
Die Eigenschaften in den eckigen Klammern sind optional, wobei „transition-property“ angibt, welche Eigenschaften animiert werden sollen. Die Eigenschaft „color“ definiert zum Beispiel die Text-Farbe. Um alle Eigenschaften zu animieren, kann man an dieser Stelle auch „all“ verwenden. „transition-duration“ gibt die Dauer der Animation in Millisekunden (ms) oder Sekunden (s) an und „transition-timing-function“ das Geschwindigkeitsverhalten des Übergangs auf der Zeitachse. Dabei sind folgende Werte möglich:
- ease (Standardwert): Die Transition startet langsam, beschleunigt schnell und endet langsam.
- ease-in: Die Transition beginnt langsam und endet schnell.
- ease-out: Die Transition fängt schnell an und endet langsam.
- ease-in-out: Anfang und Ende sind langsam, die Mitte schnell.
- linear: Die Transition läuft durchweg gleich schnell.
Mit dem Befehl „transition-delay“ kann man schließlich den Start der Animation in Sekunden oder Millisekunden verzögern. Eine einfache Animation für einen Übergangseffekt mit Farbwechsel ist zwar nicht wirklich spektakulär. Doch in Kombination mit weiteren CSS3-Funktionen, etwa den CSS3 Transforms, lassen sich ansprechende Effekte bauen.
CSS3 Transforms
Mit Hilfe von CSS3 Transforms kann man – wie der Name es schon vermuten lässt – Elemente transformieren. Man kann sie rotieren lassen (rotate), ihre Position verschieben (translate), skalieren (scale) und verzerren (skew).
Auch wenn Transforms nicht direkt zu den CSS3-Animationen gehören, so können sie doch ein wesentlicher Bestandteil sein. Deshalb hier ein kleines Beispiel für eine Rotation mit Transition: Ein rotes Rechteck soll sich bei Mouseover (:hover) um 45 Grad drehen und grün werden:
Transforms – HTML-Teil
<div id=“example"></div>
Listing 3
Transforms – 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); }
Listing 4
Animation und @keyframes
Die Befehle „animation“ und „@keyframes“ sind am mächtigsten, wenn es darum geht, mittels CSS3-Animationen umzusetzen, weil man hier einen sehr großen Spielraum hat. Ähnlich wie bei Flash kann man dabei nämlich Keyframes auf einer individuellen Zeitachse erstellen.
In Flash kann man auf der Zeitachse zwei Keyframes anlegen, in denen zum Beispiel ein Objekt bewegt wurde. Der Bewegungs-Tween zwischen den beiden Keyframes animiert dann automatisch den Weg des Objekts vom ersten zum zweiten Keyframe und überträgt dies auf die dazwischenliegenden 25 Frames.
So kann man sich auch die Animation mit CSS3 vorstellen. Die Transitions funktionieren ja zum Beispiel genau so. Mit CSS3 „animation“ und „@keyframes“ kann man jedoch nicht nur den Zustand A und B mittels Keyframes definieren, sondern auch beliebig viele Zwischenzustände.
Das folgende Beispiel erklärt das Prinzip, auch wenn es auf Webkit-Browser beschränkt ist, um den Code schlank zu halten. Der Code beschreibt ein Rechteck, das seine Farbe wechselt, sich dabei in einem Kreis dreht und in einer viereckigen Form über den Monitor fliegt:
Animation und @keyframes – HTML-Code
<div id="box"></div>
Listing 5
Animation und @keyframes – 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; }
Listing 6
Die Prozentwerte dieses Beispiels (0, 25, 50, 75 und 100 Prozent) stehen für die jeweiligen Keyframes. Insgesamt haben wir also fünf Keyframes, wobei der erste (0 Prozent) die Startwerte beschreibt. Die Werte bei „margin“ (Außenabstand) legen die Position des Objekts fest. Über „border-radius“ lassen sich die Ecken des Rechtecks abrunden, bis es ein Kreis ist (und umgekehrt). Die Angabe unter „transform“ bringt das Rechteck zum Rotieren und die bei „background-color“ ist für den Farbwechsel zuständig.
Bei der ID „#box“ kann man mit dem Wert unter „animation-name“ das Keyframe-Set zuweisen und mit „animation-duration“ die Länge der Animation festlegen. Die Angabe unter „animation-timing-function“ hat die selbe Funktion wie die unter „transition-timing“ bei den Transitions (siehe oben). Mit der letzten Eigenschaft „animation-iteration-count“ wird festgelegt, dass die Animation unendlich oft wiederholt wird.
Software-Lösungen für CSS3-Animationen
Adobe bietet Web-Entwicklern mit Edge Animate ein leistungsstarkes Tool, um umfangreiche HTML5- und CSS3-Animationen zu erstellen. Die Videos auf AdobeTV sollten den meisten unbedarften Entwicklern dabei helfen, einen schnellen Einstieg in Edge zu finden. Wer bereits über Erfahrungen mit Adobe Flash verfügt, sollte sich außerdem schnell in Edge einfinden können.
Aber auch kleinere Softwarefirmen haben gute Lösungen für Web-Animationen im Angebot. Im Mac AppStore von Apple tummeln sich zum Beispiel verschiedene Tools, die für kleines Geld durchaus gute Ergebnisse abliefern. Am beliebtesten ist derzeit bei vielen Web-Entwicklern die App „Hype“. Alle diese Werkzeuge spucken nach dem Export HTML5- und CSS3-Dateien aus, teilweise kommen auch noch einige JavaScript-Dateien dazu. Diese Dateien kann der Nutzer daraufhin in die eigene Website einbinden. Bei einfachen Übergangseffekten oder kleinen Animationen ist man mit ein paar Zeilen CSS-Code jedoch schneller.
Tools und kleine Helfer
Daneben gibt es einige Tools, die Entwicklern grundsätzlich die Arbeit mit CSS3 erleichtern, also auch im Hinblick auf Animationen. Dazu gehören vor allem kleine Generatoren für CSS-Eigenschaften mit Drop-downs der Werte – beispielsweise für die oben genannten Transitions.
Ein großer Vorteil dieser kleinen Helfer hierbei besteht außerdem darin, dass der Code mit sämtlichen wichtigen Vendor-Präfixen ausgegeben wird. Wer seinen Code lieber selber schreibt, kann mit diesen Tools also dennoch etwas Arbeit sparen. Einfach nur die vom W3C vorgeschriebenen CSS-Eigenschaften verwenden und danach komfortabel mittels prefixmycss.com sämtliche Vendor-Präfixe hinzufügen lassen.
Fazit
Im Grunde eignen sich CSS3-Animationen heute schon für viele Web-Projekte. Dennoch empfiehlt es sich, sie im großem Stil nur mit Bedacht zu wählen. Der Grund: Es gibt immer noch sehr Update-träge Zielgruppen mit veralteten Browser-Versionen, die diese Animationen nicht richtig darstellen. Wer seine Website also für eine breite Zielgruppe anlegen möchte, sollte seine Gestaltung nicht essenziell von diesen CSS3-Animationen abhängig machen. Für moderne Websites mit entsprechender Zielgruppe bieten CSS3-Animationen allerdings viele tolle Möglichkeiten.
CSS transtions sind ganz nett, mir fehlt es da aber an kontrolle. Z.b. gibt es keinen weg festzustellen ob eine animation abgeschlossen ist. Oder ob noch eine andere läuft.
Zudem sind, wie im artikel beschrieben, viele leute mit zu alten Browsern unterwegs.
Außerdem haben CSS transitions so ihre macken, wenn es z.b. gilt elemente mit einem xxx: auto wert zu animieren, das kann man nur über JS machen.
Was mir auch afegfallen ist, das bei CSS transitions oft ein weichzeichner zum einsatz kommt der das resultat unschön verschmiert.
Wenn es eine schnittstelle geben sollte die JS und CSS super vereint würde ich umsteigen. z.b. das ich per JS nen handler an eine animation knüpfen kann und diese dann nach bleiben zu manipulieren vermag :)
ich sehe CSS3 animationen derzeit nicht für den professionellen einsatz ausreichend implementiert. Für Hobby entwickler und kleinere dinge praktikabel weil schnell geschrieben, mehr aber auch net.
Nutze die meist nur für hover effekte
Jetzt werden schon Artikel wiederholt ? ..
Erstveröffentlichung: 27.11.2012 …
Hallo, wie oben zu sehen ist, handelt es sich um einen Artikel aus dem t3n Magazin Nr. 30. Einige Zeit nach Veröffentlichung darin werden Artikel vollständig online gestellt, so auch dieser.
@ marc.tissler: Ich denke auch nicht, dass CSS3 Transitions für komplexe Animationen gedacht sind. Viel mehr sollten sie für kleine Animationen eingebaut werden. Gute Beispiele dafür sind zB CSS3 Transitions auf Links, welche mit Javascript rechenintensiver und unperformanter wären. Für richtige Animationen kommt man nicht um jQuery herum.
Einige CSS3 Demos zeigen ja, dass man mit CSS3 auch schon Slider etc. bauen kann, allerding mehr schlecht als recht und daher eher als „casy study“ gedacht.