Anzeige
Anzeige
UX & Design
Artikel merken

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

Web-Animationen mit HTML5 und CSS3 sind im mobilen Bereich das Mittel der Wahl. Und sie lassen sich relativ leicht selbst programmieren. Eine praktische Anleitung für CSS3 Transitions, Transforms, Animations und @keyframes sowie Tipps und Ratschläge für praktische Software-Tools.

6 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
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

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

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!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige