Animationen mit CSS3 – Teil 1: Transitions

Zwar befindet sich CSS3 auch nach über 10 Jahren der Entwicklung noch immer in keinem fertigen, stabilen Zustand, dennoch veröffentlichten bekanntlich die Browserhersteller einige Neuerungen schon vorab – ein paar vereinzelte davon sind schon als stabil eingestuft (beispielsweise die Text-Schatten). Viel interessanter sind jedoch zumeist die Features, die die Browser-Hersteller erst als experimentell eingestuft haben, da diese eben noch völlig neu sind. In diesem Blog-Eintrag möchten wir einmal etwas genauer auf die Eigenschaft transition eingehen.

Wer es genau wissen will, was mit Transitions alles angestellt werden kann, kann gerne die (momentane) Spezifikation beim W3C nachlesen. Wer dagegen nicht so viel von dem eher anstrengenden Spezifikations-Texten hält, weil man zumeist nach dem Lesen genauso schlau ist, wie vor dem Lesen, kann auch gerne hier einfach weiterlesen…

Frage 1: Was sind überhaupt Transitions?
Bis jetzt wurden – sofern man kein extra Javascript dafür verwendet hat – Übergänge von HTML-Elementen von einem Zustand in einen anderen (zum Beispiel, wenn man einen Link mit der Maus überfährt, dass sich dieser dann anders einfärbt) recht langweilig dargestellt. Der alte Zustand ist plötzlich verschwunden und im gleichen Augenblick taucht der neue Zustand auf. Mit den Transitions lässt sich dieser Übergang nun animieren, sodass ein Zustand zum anderen nun sanft ineinander übergehen.

Frage 2: Was benötige ich für Transitions?
Da Transitions noch relativ neu sind, benötigt man auch einen modernen Browser. Zu den “modernen” Browsern gehören in dem Falle die folgenden: Mozilla Firefox 4+, Google Chromium 1.0+, Opera 10.50+, Apple Safari 3.2+ und alle darauf aufbauenden Browser. Der Internet Explorer in einer stabilen Version unterstützt die Transitions bis jetzt noch nicht. In Version 10 soll dann diese Eigenschaft jedoch auch noch nachgereicht werden.

Frage 3: Wie realisiere ich den ganzen Spaß nun?
CSS3 stellt hierfür eine ganze Menge neuer Eigenschaften zur Verfügung, mit denen die Animation nach Belieben gestaltet werden kann. Im Folgenden werden kurz alle Eigenschaften kurz vorgestellt. Da Transitions jedoch noch experimentell sind, werden diese mit den üblichen browserspezifischen Präfixen (-moz- für Firefox, -webkit- für Chromium/Safari, -o- für Opera und -ms- für den IE) gekennzeichnet. Hier werden diese Präfixe jedoch der Übersichtlichkeit wegen ignoriert.

  • transition-property: Mit dieser Eigenschaft wird angegeben, welche sich ändernde Eigenschaft überhaupt betrachtet werden soll. Das können einzelne Eigenschaften seien (z.B. color, opacity, font-size, background; hier findet sich eine (vollständige?) Liste aller Eigenschaften), eine Liste von mehreren Eigenschaften, die mit Komma getrennt wird oder ganz einfach das Stichwort “all“, dass alle Eigenschaften, die sich ändern betrifft.
  • transition-duration: Hiermit lässt sich festlegen, wie lange die Animation des Übergangs dauern soll (mögliche Werte: 1s, 0.5s, 500ms, …). Gibt man hier einen Wert an, dann gilt dieser für alle in transition-property angegebenen Eigenschaften. Es kann aber auch für jede angegebene Eigenschaft eine andere Zeit angegeben werden. Logischerweise wird dann die erste Zeit der ersten angegeben Eigenschaft zuordnet, die letzte Zeit dagegen der letzten Eigenschaft.
  • transition-timing-function: Mit dieser Eigenschaft lässt sich der Geschwindigkeitsverlauf der Animation festlegen. Dies kann manuell durch cubic-bezier(Wert1, Wert2, Wert3, Wert4) festgelegt werden, wobei Wert1 – Wert4 Zahlen zwischen 0.0 und 1.0 sind und insgesamt eine kubische Bézierkurve darstellen. Wie das Ganze jedoch funktioniert möchten wir hier nicht weiter erklären, da dies den Umfang dieses Eintrags sprengen würde. Viel einfacher ist dann die Verwendung folgender vorgegebener Verläufe: ease (Standard; Anfangs und zum Ende der Animation langsamer, dazwischen schnell), ease-in (wird immer schneller und stoppt abrupt), ease-out (beginnt abrupt und wird dann immer langsamer), ease-in-out (ähnlich wie ease, etwas langsamer am Anfang und Ende) und linear (immer die gleiche Geschwidigkeit).
  • transition-delay: Hier lässt sich noch eine Verzögerung angeben, mit der die Animation beginnt. Diese Eigenschaft funktioniert genauso wie transition-duration.
  • transition: Ähnlich wie bei background lassen sich mit dieser Eigenschaft die oben genannten Eigenschaften auch einfach zusammenfassen. Genauer gesagt, wird hier zunächst die Eigenschaft, die Dauer, dann der Geschwindigkeitsverlauf und zuletzt die Verzögerung angegeben (getrennt nur durch Leerzeichen, nicht durch Kommas!). Mehrere Übergänge lässen sich auch hier durch Kommas trennen.

Frage 4: Beispiele?
Fangen wir am besten ganz einfach an. Auf folgender Seite lassen Links durch das Überfahren mit der Maus verschwinden, rot einfärben und vergrößern. Hierbei wird die verkürzte Syntax inkl. “all” für alle Eigenschaften mit einer Animationsdauer von 2 Sekunden verwendet. Den zugehörigen CSS-Code findet ihr auf der Seite direkt unter den Beispielen…

Hier gehts zum Beispiel 1!

Im nächsten Beispiel wird es schon komplizierter. Hier lassen wir durch einen Klick auf einen Button einen Text nach 2 Sekunden mit einer Dauer von 3 Sekunden und einem linearen Geschwindigkeitsverlauf verschwinden. Davor hat sich jedoch ohne Verzögerung bereits die Farbe mit einer Dauer von 1.5 Sekunden mit Verlauf “ease-in-out” verändert. Bei einem zweiten Klick auf den Button lässt sich alles wieder rückgängig machen (wobei hier die Animation der Änderung der Farbe nicht sichtbar ist). Auch hier findet sich der CSS-Code wieder direkt unter dem Beispiel.

Hier gehts zum Beispiel 2!

In einem dritten Beispiel möchten wir noch einmal kurz die Unterschiede der einzelnen Geschwindigkeitsverläufe gegenüber stellen. Beim Überfahren der Box mit der Maus bewegen sich die darin befindlichen kleinen Boxen nach rechts und beim Verlassen wieder zurück (geändert wird hier im Übrigen die Eigenschaft left). Der zugehörige CSS-Code zu dem Beispiel befindet sich ebenfalls direkt darunter.

Hier gehts zum Beispiel 3!

Natürlich könnte man die Liste der Beispiele noch endlos weiter führen. Das Ergebnis ist letztendlich immer dasselbe: Mit CSS lassen sich viele tolle Animationen ohne große Kenntnisse von Javascript, Flash, Java und Co. und mit nur sehr geringem Aufwand relativ einfach realisieren. In weiteren Einträgen werden dann noch weitere Möglichkeiten gezeigt, mit denen man seine Webseite mit CSS animieren kann.

Frage 5: Darf ich noch eine Frage stellen?
Natürlich. Gerne dürfen Fragen zu diesem Thema in den Kommentaren gestellt werden. Wir werden dann versuchen, diese auch schnellstmöglich zu beantworten.

2 Kommentare

Pingbacks: 2

pingback von Transformationen mit CSS3 – Teil 1 « Netroid 24. März 2012
pingback von Animationen mit CSS3 – Teil 2: Das Animation-Modul « Netroid 5. September 2012

Schreibe einen Kommentar zu Anonymous Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*