index,follow

CSS3 statt Javascript - Transitions

10.05.2012, 15:44 von Daniel || (Kommentare: 0) || Mit anderen teilen

Bei der Entwicklung von CSS3 haben sich die verschiedenen Working Groups mächtig ins Zeug gelegt. Nicht nur, das einfache Designelemente wie runde Ecken ohne Grafikeinsatz möglich sind. Mit Transitions sind auch steuerbare Animationen hinzu gekommen, die den Einsatz von Frameworks wie jQuery überflüssig machen.

Inhaltsverzeichnis

Teil I:Transitions
Teil II:Die Pseudo-Klasse :target
Teil III:Transforms

So richtig weiß niemand, in welche Richtung es noch gehen wird. Die 3-Dimensionalität wird sicherlich ein großes Ding in naher Zukunft. Etliche Beispiele, meist als Chrome Experiments betitelt, geistern schon seit einiger Zeit durchs Netz.

Was aber heute schon dank mittlerweile breiter Browserunterstützung eingesetzt werden kann, sind die CSS3 Transitions. Transitions sind nichts anderes als Animationen, also gesteuerte Veränderungen oder Bewegungsabläufe. Es bedarf keiner Zeile Javascript mehr. Kein Einbinden von Frameworks. Gerade das Arbeiten mit den mootools war in dieser Hinsicht immer ein Krampf.

Die Syntax

Eine Animation lässt sich bis ins kleinste Detail steuern. Dafür stehen 4 Angaben zur Verfügung, wovon lediglich 2 Pflichtangaben sind:

#example1 {
  height:5em;
  transition-property:height;
  transition-duration:2s;
}

Im ersten Beispiel (für eine Demo einfach dem Link folgen) hat das Element eine Höhe von 5em. Dies ist zugleich der Startwert für die transition. Mit transition-property wird die CSS-Eigenschaft angegeben, die animiert verändert werden soll. transition-duration gibt das Zeitintervall an, in dem die Animation abläuft. Es sind Angaben in Sekunden (s) oder Millisekunden (ms) möglich. Für JS-Animations-Geschädigte sind die Angaben in Millisekunden sicherlich geläufiger.

Anschließend wird über ein Event der Endwert für die Transition gewählt:

#example1:focus {
  height:15em;
}

That's it! Ich finde es zwar merkwürdig, die Transition bei der Definition des Startwerts zu notieren. Logischer wäre es, sie beim Endwert zu verfassen. Das hätte zudem den großen Vorteil, bei verschiedenen Events - etwa :hover und :focus - auch verschiedene Animationen zu benutzen. Aber die beteiligten Personen in den Working Groups dachten da wohl anders.

Weitere Werte

Für einfache Animationen reichen die beiden Angaben zu transition-property und -duration aus. Zwei weitere Parameter gibt es jedoch noch.

Mit transition-delay kann man eine Verzögerung einbauen, die den Start der Animation hinaus schiebt. Es können positive als auch negative Werte verwendet werden, wobei negative Werte dafür sorgen, dass die Transition nicht ausgeführt wird und der Endwert sofort eintritt.

#example1-b {
  height:5em;
  transition-property:height;
  transition-duration:2s;
  transition-delay:500ms;
}

Als komplexeste und letzte mögliche Eigenschaft kommt transition-timing-function ins Spiel. Komplex deshalb, weil neben Schlüsselwerten auch gänzlich individuelle Werte möglich sind. Mit der timing-function lässt sich die Art der Animation steuern. Mit dem Standardwert ease beispielsweise verläuft die Transition so, dass die Geschwindigkeit der Animation von Beginn bis Mitte der Zeitachse ansteigt und zum Ende hin wieder abnimmt. Besonders gut wird das beim Mozilla Developer Network in Graphen dargestellt. Auch das W3C hält viele Infos zum Thema bereit.

Folgende Schlüsselwerte sind zulässig:

  • linear
  • ease (Standardwert)
  • ease-in
  • ease-out
  • ease-in-out
  • steps

Besonderheit hier sind steps. Eine Transition über steps ist - wie der Name schon sagt - keine flüssige Animation, sondern eine schrittweise Veränderung.

Schreibweisen und Zusammenfassung

Natürlich lassen sich alle Angaben auch zusammen fassen. Eine bestimmte Reihenfolge ist nur bei den Zeitangaben einzuhalten. Der erste Wert muss immer die Dauer, der zweite die Verzögerung sein. Das folgende Beispiel zeigt eine mehrfache Kurzschreibweise:

<article id="example2">
  <figure>
    <img src="myPic.jpg" alt="Mein Bild">
  </figure>
           
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</article>

Mit folgendem CSS:

#example2 {
  width:400px;
}
#example2 figure {
  float:left;
  width:30%;
  border:5px solid #999;
  transition:
    float 1500ms linear,
    width 1500ms ease-out,
    border 1000ms ease-in;
}
#example2 figure img {
  width:100%;
  height:auto;
}
#example2 figure:hover {
  float:none;
  width:100%;
  border-color:#666;
}

Wie das in der Praxis aussieht, sieht man im zweiten Beispiel auf der Demoseite.

Einschränkungen und Browser-Unterstützung

Chrome Firefox Internet Explorer Opera Safari
seit 4.01
seit 4.02
ab 103
seit 10.54
seit 3.15

1 ... mit Präfix -webkit-
2 ... mit Präfix -moz-
3 ... mit Präfix -ms-
4 ... mit Präfix -o-
5 ... mit Präfix -webkit-

Wie in der Tabelle zu sehen, gibt es seitens der Browser bereits breite Unterstützung. Da CSS Transitions nach wie vor im Entwurfsstatus sind (Stand: Mai 2012), kommt man ohne Präfixe aber noch nicht aus. Nur die Versionen des Internet Explorer bis zur 9 spielen da nicht mit. Kann man auf die Animationen nicht verzichten, muss man als Fallback wieder auf jQuery oder mootools zurück greifen.

Quelle: caniuse.com

Wann der Status weg vom Entwurf, hin zu final und fertig, geändert wird, ist derzeit nicht absehbar. Des weiteren scheinen die Webkit-Browser ein Problem mit Transitions bei den Pseudo-Elementen :before und :after zu haben. Ein Test mit Chrome 18 beim verlinkten jsFiddle ergab immer noch keine Besserung.

Fazit

Mit den Transitions kann man viele Dinge machen. Was genau, ist nur durch die eigene Phantasie begrenzt. Auf vielen Beispielseiten kann man sich mittlerweile Inspirationen holen, z.B. bei Oliver Gast oder im CSS Wiki. Bitte mehr davon!

Foto: Binary Code 2 von flaivoloka bei sxc.hu

Schlüsselwörter zu diesem Beitrag

« Zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Einen Kommentar schreiben



Nutze Deinen Gravatar.


Was ist die Summe aus 6 und 1?