Vorheriger Artikel Nächster Artikel

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

Aus dem
t3n Magazin Nr. 30

12/2012 - 02/2013

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

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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von marc.tissler am 25.04.2013 (09:09Uhr)

    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 Teilen
  2. von marc.tissler am 25.04.2013 (09:11Uhr)

    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 Teilen
  3. von Guest am 25.04.2013 (09:15Uhr)

    Jetzt werden schon Artikel wiederholt ? ..

    Erstveröffentlichung: 27.11.2012 ...

    Antworten Teilen
  4. von Johannes Schuba am 25.04.2013 (12:04Uhr)

    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 Teilen
  5. von Marcus Graf am 25.04.2013 (16:27Uhr)

    @ 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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]
Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen