Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Von Transitionen und Animationen

Von Transitionen und Animationen

Weihnachten, Zeit der Besinnlichkeit, aber auch Zeit der Dekoration. Hinter unserem heutigen Türchen zeigt Eric Eggert wie Webseiten mit Transitionen und Animationen dekoriert werden können.

Die Vorschläge des Webkit-Teams an das W3C zur Erweiterung des CSS3-Standards sind vielfältig. Kernstück sind CSS Transforms, CSS Transitions und CSS Animations. Alle drei Standards befassen sich umfassend mit der Animation von CSS-Eigenschaften. Im Folgenden stelle ich die grundlegenden Prinzipien vor, die zur Beispieldatei geführt haben.

Achtung! Dieser Artikel behandelt zukünftige Standards, die noch nicht in allen Browsern implementiert sind. Im Artikel benutzen wir die Notation, wie sie vorgeschlagen ist, in den Beispielen werden natürlich Vendor Prefixes genutzt. Das Beispiel funktioniert momentan nur in Webkit-Browsern, also Safari und Chrome.

Per Transformation gedrehtes Bild
Per Transformation gedrehtes Bild

Transformationen

Um Elemente auf der Fläche zu transformieren, gibt es einige neue Attribute; das wichtigste ist wohl das transform-Attribut, das als Werte so genannte Transformationsfunktionen haben kann. So können wir zum Beispiel beliebige Elemente skalieren oder rotieren.

  1. transform:
  2.   rotate(-3deg)
  3.   scale(0.5);

Diese Transformation dreht das Element um -3 Grad und verkleinert es um die Hälfte.

Transitionen

Bei Transitionen wird nur definiert, in welcher Art sich CSS-Eigenschaften verändern sollen, wenn sie geändert werden. Dabei ist die Art der Änderung völlig egal, das kann per JavaScript direkt oder durch das zuweisen einer Klasse sein, per :hover/:focus-Pseudo-Klassen oder durch Veränderungen im Webinspektor. Die Transition interessiert sich dafür nicht.

Syntaxbeispiel: transition: width 1s linear;

Die Breite des Elements wird linear animiert, bis die Breite der Breite entspricht, die gerade durch CSS festgelegt wurde. Wird die Breite von 100 auf 200 gesetzt, wird das Element pro Millisekunde um einen Pixel breiter. Anstatt linearer Animation sind auch die Werte ease (Bis 25% der Animation langsamere Beschleunigung, ab 75% der Animation deutliches abbremsen), ease-in (Bis 42% der Animation beschleunigen), ease-out (Ab 58% der Animation abbremsen), ease-in-out (Bis 42% der Animation beschleunigend, ab 58% der Animation abbremsend) möglich, sowie die Festlegung einer eigenen Animationsart (Beschleunigung und Abbremszeitpunkt sind frei wählbar). Auch Transformierungen können so animiert werden:

  1. a {
  2.   transform: rotate(-3deg) scale (1);
  3.   transition: transform 1.5s linear;
  4. }
  5.  
  6. a:focus, a:hover, a:active {
  7.   transform: rotate(363deg) scale (1.5);
  8. }

Beim Überfahren mit der Maus dreht sich der Link einmal um die eigene Achse und ist statt nach links nach rechts geneigt. Außerdem wird er 1.5 mal so groß (Im Beispiel anschauen).

Animationen

Die Möglichkeit, Transitionen zu verketten und hintereinander abzurufen, bieten CSS-Animationen. Man beschreibt inwiefern die Animation angewendet werden soll:

  1. div {
  2.   position:absolute;
  3.   top:10px; left:10px;
  4.   width:50px; height:50px;
  5.   background-color:red;
  6.   animation-name: meine-animation;
  7.   animation-duration: 20s;
  8.   animation-iteration-count: infinite;
  9. }

Auf das div wird die Animation meine-animation angewendet, die an anderer Stelle beschrieben ist. Die Animation soll 20 Sekunden dauern und unendlich oft wiederholt werden.

  1. @keyframes meine-animation {
  2.   from { top:10px; left:10px; }
  3.   25% { top:100px; left:100px; }
  4.   50% { top:10px; left:200px; }
  5.   75% { top:100px; left:300px; }
  6.   to { top:10px; left:400px; }
  7. }

Diese Animation lässt das rote Quadrat über die Seite wandern, am Ende verschwindet das Quadrat und springt wieder an den Anfang. Wird animation-direction:alternate spezifiziert, wandert das Quadrat auf dem gleichen Weg zurück. from und to sind dabei Ausgangs- bzw. Endwerte, die Prozentangaben beziehen sich auf die Zeit in der gesamten Animationsdauer, die ja direkt beim anzusprechenden Element angegeben ist. Im Beispiel werden Animationen benutzt um Schneeflocken aus Asterisken (aka Sternchen) zu animieren.

Beispieldokument mit Animationen und Transitionen
Beispieldokument mit Animationen und Transitionen

Seiten, die bereits Transitionen oder Animationen nutzen:

Kommentare

Michel
am 21.12.2009 - 08:52

Ich hab am Wochenende auch ein wenig damit rumexperimentiert und das macht einfach nur Spaß.

Danke für den Artikel!

Permanenter Link

Hannelore
am 21.12.2009 - 16:55

Schöne Idee. Gerade zur Weihnachtszeit kommen animierte Eiskristalle gut an.

Permanenter Link

Andreas Fritsch
am 21.12.2009 - 19:37

Schönes Beispiel.
Gedanklich tue ich mich CSS-Animationen etwas schwer, wenn ich an eine klare Trennung von Struktur (Html), Gestaltung (CSS) und Verhalten (JS) einer Seite trennen möchte.

Permanenter Link

alexander farkas
am 22.12.2009 - 14:19

@andreas

Dieses Argument mit der Trennung von Struktur, Lyaout und Verhalten hört man total oft im Zusammenhang mit CSS-Animationen. Dabei sind CSS-Animationen ein Schritt zu einer besseren Trennung.

Javascript sollte immer nur das Verhalten beschreiben: zum Beispiel bei Click auf Schalter "a" wird der Bereich "b" sichtbar. Wie er denn genau animationstechnisch sichtbar wird (Das dabei beispielsweise die Hintergrundfarbe von hellblau auf dunkelblau wechselt) ist eine rein gestalterische Frage. Mich ärgert es beim JS coden immer gewaltig, wenn aus Animationsgründen CSS-Anweisungen hart in JS gecodet werden müssen. Im Prinzip sind alle meine Module so aufgebaut, daß Animationen immer extern configuriert werden müssen. Letztendlich stehen Designangaben aber so weiterhin im JS.

Letztendlich sind :hover, :focus etc. verhaltensbezogene Angaben im CSS, aber bestimmt nicht Animationen. Außerdem bieten CSS-Animationen auch eine JS-API an, so daß du rein theoretisch alles was an einer Animation ausnahmsweise verhaltenbezogen ist (zum Beispiel die duration, die von der Länge des Ajax-Requests abhängt) dort definieren kannst.

jQuery UI bietet sogar ein eigenes Classnanimation Plugin an @http://jqueryui.com/demos/addClass/. Allerdings ist das Ding so verbuggt, daß ein Produktiveinsatz alles andere als empfehlenswert ist. Ich hoffe jQuery UI 1.8 enthält endlich die lang ersehten Patches.

Permanenter Link

Die Kommentare sind geschlossen.