Benjamin Weigl ist seit 2005 als selbstständiger Webentwickler und Designer für Unternehmen aus ganz Europa tätig.
Das Animations Modul Level 3
Abgefahrene Namen geben die englischen Kollegen den CSS3 Modulen Animation und Transition. Flash-Killer hat mir persönlich sehr gut gefallen, obgleich es absolut absurd ist die Möglichkeiten von CSS3 mit Flash zu vergleichen. Flash hat sicherlich die letzten Jahre gewisse Dinge übernommen die mit JavaScript und HTML/CSS noch nicht möglich waren, dennoch sind die Einsatzgebiete und Daseinsberechtigungen völlig unterschiedlich.
Die Module Animation und Transition eignen sich vielmehr dazu Interaktivität ohne JavaScript auf die eigene Seite zu bringen bzw. vorhandene mit JavaScript animierte Elemente durch die CSS3 Animationstechnik zu ersetzen, bzw. zu ergänzen/erweitern.
Die Vorteile einer Animation mit CSS3 liegen ganz klar auf der Hand:
- Es wird keine JavaScript benötigt
- Es werden keine Frameworks benötigt
- die Animationen stören keine Skripte
- kein Flash wird benötigt
Weshalb also auf anderweitige Lösungen zurück greifen, wenn das ganze bereits über Cascading Style Sheets zur Verfügung gestellt wird.
Die Nachteile wollen wir natürlich auch nicht verschweigen:
- Internet Explorer 6,7,8
- Internet Explorer 9
Sicherlich ist es jetzt nicht ganz fair nur Microsoft ans Bein zu pinkeln, denn auch die älteren Versionen von Firefox, Safari und Konsorten können damit nämlich nichts anfangen. Allerdings fällt die Verbreitung von den anderen Browsern, was ältere Versionen anbelangt, lange nicht so ins Gewicht wie die Verbreitung des Internet Explorers. Größtes Manko ist natürlich der Internet Explorer 9, welcher jetzt schon vermuten lässt das er zum IE6 Pendant für CSS3 Unterstützung mutiert.
Fallbacks sind auf alle Fälle notwendig. Es bleibt einem also selbst überlassen ob man das ganze weiterhin mit JavaScript umsetzt, doppelt gemoppelt arbeitet oder in Kauf nimmt das ein gewisser Teil von Besuchern die Animationen nicht sehen oder nutzen kann.
Einleitung in die Animation mittels CSS3
Fangen wir doch einfach mal mit einer kleinen Animation an und springen ins kalte Wasser. Nachfolgend das Grundgerüst für alle hier gezeigten Demos. Um eine Demo abzuspielen fahre mit der Maus über den grau umrandeten Container.
<!-- HTML Basis für die Demos --> <div class="aniWrapper"> <div class="aniSquare" id="aniDemoX"></div> </div>
<!-- CSS Basis für die Demos -->
.aniWrapper {
float: left;
width: 400px;
height: 100px;
padding: 20px 20px 20px 60px;
border: 1px solid lightgray;
}
.aniSquare {
float: left;
width: 80px;
height: 80px;
background: red;
margin-top: 10px;
position: relative;
}
Die Demos funktionieren nur mit Safari ab 4.0 und Chrome ab 1.0. Für Mozilla oder Opera muss der Suffix von (-webkit- nach -moz- oder -o-) angepasst werden.
Folgende 3 Bezeichner sind die Ausgangsbasis jeder Animation mit CSS3:
animation-name gibt unserer Animation einen eindeutigen Namen. Er wird benötigt um unserer Animation später Keyframes zuzuordnen. animation-duration legt die Zeitspanne fest, in der unsere Animation ausgeführt werden soll. animation-iteration-count ist für die Anzahl der Abläufe zuständig.
.aniWrapper:hover #aniDemo01 {
-webkit-animation-name: 'meineAnimation';
-webkit-animation-duration: 2s; /*Dauer in Sek.*/
-webkit-animation-count: 1; /*oder infinite*/
}
Im zweiten Schritt erstellen wir die eigentliche Animation. Animationen mit CSS3 folgen einer Zeitleiste, ähnlich wie bei Flash gibt es ein Keyframe am Anfang, am Ende und beliebig viele Keyframes zwischen drin.
@keyframes 'meineAnimation' {
from { left: 0px; }
to { left: 100px; }
}
Der Ablauf der Animation kann entweder mit from - to oder in Prozent(%) oder gemischt angegeben werden.
@keyframes 'meineAnimation' {
0% { left: 0px; }
100% { left: 100px; }
}
CSS3 Demo - Animation
.aniWrapper:hover #aniDemo01 {
-webkit-animation-name: 'meineAnimation';
-webkit-animation-duration: 2s;
}
@-webkit-keyframes 'meineAnimation' {
0% { left: 0px; }
100% { left: 100px; }
}
Wir haben erfolgreich unsere erste Animation mit CSS3 erstellt. Die Animation selbst spielt einmal ab und springt anschließend zurück in die Ursprungsposition. Da dieser Sprung nicht sonderlich schön ist erweitern wir unser Keyframe Konstrukt um ein Keyframe in der Mitte. Außerdem verlängern wir die Dauer auf 4 Sekunden und die Anzahl der Wiederholungen erhöhen wir auf 4.
.aniWrapper:hover #aniDemo01 {
-webkit-animation-name: 'meineAnimation';
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 4;
}
@-webkit-keyframes 'meineAnimation' {
0% { left: 0px; }
50% { left: 100px; }
100% { left: 0px; }
}
Schauen wir uns nun die weiteren Bezeichner an. animation-delay löst eine Verzögerung beim Start der Animation aus. animation-direction regelt den normalen oder alternativen Ablauf der animation-iteration-count Eigenschaft. animation-play-state weist den Status der Animation aus, welcher running oder paused sein kann. Der letzte Bezeichner lautet animation-timing-function. animation-timing-function wird auf die Animationen zwischen zwei Keyframes angewendet und regelt die Geschwindigkeit. Die Eigenschaften können:
- linear (Default)
- ease, ease-in, ease-out, ease-in-out
- cubic-bezier(0, 0, 0, 0)
lauten. Hier ein kleines Beispiel mit animation-delay also einer Verzögerung beim Start und verschiedenen animation-timing-function Angaben:
.aniWrapper:hover #aniDemo01 {
-webkit-animation-name: 'meineAnimation';
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s;
}
@-webkit-keyframes 'meineAnimation' {
0% { left: 0px; }
25% { left: 100px;
-webkit-animation-timing-function: ease-in;
}
50% { left: 25px;
-webkit-animation-timing-function: ease-out;
}
75% { left: 75px;
-webkit-animation-timing-function: ease-in;
}
100% { left: 0px;
-webkit-animation-timing-function: ease-out;
}
}
Animation ist nicht gleich Transition
Wer sich die vielen Demos von Animation mit CSS3 ansieht, der könnte schnell glauben das das Modul Animation dafür zuständig ist. Das ist ein Fehler. Die meisten Animationen werden überwiegend mit den Modulen CSS Transitions und CSS 2D Transformations erledigt.
Meiner Meinung nach ist das Modul Animation nämlich überbewertet, da jede Animation wieder in den Ursprung zurück animiert werden muss, andernfalls springt das ganze nämlich unschön (auch beim stoppen der Animation) wieder in die Ursprungsposition zurück. Mit CSS Transitions lässt sich das vermeiden.
Man sollte also aufpassen wenn man wieder mal auf Artikel wie 47 Amazing CSS3 Animation Demos stößt, denn irgendwo im Artikel steht meist ganz klein das es sich dabei um Transition und 2D-Transform Demos handelt :-)
Merke/Vorsicht: Animation ist sowohl die Umschreibung für die Verwendung der Module Animation, Transition und 2D-Transform als auch ein eigenständiges CSS Level 3 Modul
Ein weiteres Tutorial zum Thema findet sich im Webstandards Blogs, auch wenn sich hierfür Transition wohl besser geeignet hätte, die Gründe habe ich oben bereits genannt.
Anthony Calzadilla zeigt auf hardboiledwebdesign.com wofür animation gut eingesetzt werden kann, nämlich für Loops und simple Aufgaben wie das bewegen verschiedener Körperteile (hier in Perfektion mittels SVG Grafiken).
Weblinks zum Thema:
- Offizieller Draft des CSS Animation Moduls Level 3
- Erklärung der transition-timing-function
- Offizieller Draft des CSS Transition Moduls Level 3
Kommentare und Anmerkungen wie immer bei Facebook. Meine Damen und Herren, ich bin draußen.