Entwicklung & Design

CSS3 Transitions, Transforms und Animations: So nutzt du die anspruchsvollen Webtechnologien

Seite 2 / 2

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
marc.tissler
marc.tissler

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

Antworten
marc.tissler
marc.tissler

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

Antworten
Guest

Jetzt werden schon Artikel wiederholt ? ..

Erstveröffentlichung: 27.11.2012 …

Antworten
Johannes Schuba

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.

Antworten
Marcus Graf

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung