Animationen mit CSS3 - Teil 1 Grundlagen und einfache Beispiele für Übergänge mit transition

Animationen auf Webseiten waren in der Vergangenheit in erster Linie mit dem Einsatz von JavaScript verbunden. Für komplexere Animationen wurde außerdem häufig Flash verwendet.

Diese Situation hat sich mit den neuen Standards HTML5 und CSS3 grundlegend verändert. Mit dem nun endlich auch im HTML-Standard angekommenen Canvas-Element können Animationen erstellt werden, die den mit Flash erzeugten recht nahe kommen.

Darüber hinaus gibt es jetzt aber auch reine CSS-Anweisungen, die animationsartige Effekte ermöglichen. Allerdings wurden die entsprechenden CSS3-Anweisungen nur von Webkit-basierten Browsern, also Google Chrome und Safari unterstützt. Mit dem Erscheinen des Firefox 5 hat sich dieses Bild verändert, denn eine wesentlicher Fortschritt des Firefox gegenüber seinem Vorgänger ist seine Fähigkeit, CSS-Animationen zu verarbeiten. Allerdings gucken die Nutzer des Internet Explorer wie so oft mal wieder in die Röhre, den die aktuelle Version, also der Internet Explorer 9 kann mit CSS-Animationen nichts anfangen.

Grundaufbau und einfaches Beispiel

In einem ersten einfachen Beispiel soll der Grundaufbau so einer CSS-Animation dargestellt werden.

Für das zu animierende Objekt wird eine CSS-Klasse definiert, in der die folgenden Eigenschaften festgelegt sind:

transition-duration für die Dauer des Übergangs. Diese kann in Sekunden ( z.B. 1s oder 1.5s) oder Millisekunden (z.B. 700ms) angegeben werden
transition-timing-function für die Art des Überganges, genauer gesagt wird mit den möglichen Werten ease, linear, ease-in, ease-out, ease-in-out eine festgelegte kubische Bezierkurve beschrieben, nach der die Zwischenwerte der Animation berechnet werden. Mit dem Schlüsselwort cubic-bezier, gefolgt von vier Werten zwischen 0 und 1, kann so eine Kurve auch selbst definiert werden.
Eigenschaften, die sich ändern sollen und weitere, die sich nicht ändern sollten.

Das sieht dann so aus:

.transh1{
transition-duration: 1s;
transition-timing-function: ease-out;
margin-left:10px;
}

Außerdem wird für diese Klasse noch eine Definition mit der hover-Pseudoklasse festgelegt, in der nur die zu ändernde Eigenschaft enthalten ist, also

.transh1:hover{
margin-left:30px;
}

In diesem Beispiel wird durch die Veränderung der Größe des linken Randes ein Animationseffekt erzeugt. Damit wäre die Animation eigentlich fertig, doch dummerweise ist der CSS3-Standard noch im Entstehen begriffen und alle großen Browserhersteller haben noch irgendwelche Besonderheiten in ihrer Schatulle. Daher kommen wird nicht darum herum, mit browserspezifischen Präfixen zu arbeiten, was den CSS-Code deutlich aufbläht. Unser bereits begonnenes Beispiel sieht dann so aus:

.transh1{
/*FF ab 4.0*/
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
/*Safari ab 3.2, Chrome */
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;
/* Opera ab 10.5 */
-o-transition-duration: 1s;
-o-transition-timing-function: ease-out;
/* Internet Explorer ab 10?*/
-ms-transition-duration: 1s;
-ms-transition-timing-function: ease-out;
/*CSS-Standard*/
transition-duration: 1s;
transition-timing-function: ease-out;
margin-left:10px;
}

.transh1:hover{
margin-left:30px;
}

Auf diese Art wird die Überschrift im ersten CSS3-Animationsbeispiel bewegt.

Alle transition-Eigenschaften

In dem ersten Beispiel habe ich nur die Eigenschaften transition-duration und transition-timing verwendet. Außerdem gibt es:

transition-property zur Angabe der Eigenschaft oder der Eigenschaften, auf die der Übergang angewendet werden soll.
transition-delay zur Angabe einer Verzögerung in Sekunden oder Millisekunden

Standardwerte

Wie sicherlich bemerkt wurde, habe ich im Eingangsbeispiel nicht alle Einzeleigenschaften verwendet. Das ist auch nicht notwendig, denn diese Einzeleigenschaften haben jeweils einen vorbelegten Wert. Diese Vorbelegungen sind:

transition-duration 0s
transition-timing-function ease
transition-property all
transition-delay 0s

Um also einen Transitioneffekt auszulösen reicht die Angabe einen Wertes für transition-duration>0.

Kurzschreibweise

Im Eingangsbeispiel habe ich die Langschreibweise verwendet. Wie auch bei anderen CSS-Angaben gibt es auch für die Übergänge eine Kurzschreibweise, die so aussieht:

transition transition-property transition-duration transition-timing-function transition-delay.

Diese Kurzschreibweise habe ich in der Beispieldatei für die Veränderung der Schattenfarbe verwendet. Der Code hierfür sieht so aus:

.transp1{
-moz-transition: box-shadow 700ms ease-in-out;/*FF ab 4.0*/
-webkit-transition: box-shadow 700ms ease-in-out;/*Safari ab 3.2, Chrome */
-o-transition: box-shadow 700ms ease-in-out; /* Opera ab 10.5 */
-ms-transition: box-shadow 700ms ease-in-out;/* Internet Explorer ab 10?*/
transition: box-shadow 700ms ease-in-out; /*CSS-Standard*/
box-shadow: #000 0 0 15px;
}

.transp1:hover{
box-shadow: #f60 0 0 15px;
}

Veränderung mehrere Eigenschaften

Zwei oder mehr Eigenschaften gleichzeitig ändern

In den bisherigen Beispielen wurde immer nur eine Objekteigenschaft verändert. Es ist aber kein Problem, zwei oder noch mehr Eigenschaften gleichzeitig zu verändern. Der Code hierfür sieht so aus:

.transp2{
-moz-transition: 700ms ease;/*FF ab 4.0*/
-webkit-transition: 700ms ease;/*Safari ab 3.2, Chrome */
-o-transition: 700ms ease; /* Opera ab 10.5 */
-ms-transition: 700ms ease;/* Internet Explorer ab 10?*/
transition: 700ms ease; /*CSS-Standard*/
background: #f00;
margin-left:0px;
}

.transp2:hover{
background: #f0f;
margin-left:50px;
}

Wie man sieht, reicht es aus, einfach die zweite Eigenschaft hinzuzufügen. Auch diese Möglichkeit wird in der Beispieldatei demonstriert.

Zwei oder mehr Eigenschaften unabhängig voneinander ändern

Wenn sich die Eigenschaften unanhängig von einander ändern sollen, wird der CSS-Code etwas umfangreicher:

.transp3{
-moz-transition-property: background, margin-left;
-moz-transition-duration: 1s, 1s;
-moz-transition-delay: 0s, 1s;
-webkit-transition-property: background, margin-left;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-delay: 0s, 1s;
-o-transition-property: background, margin-left;
-o-transition-duration: 1s, 1s;
-o-transition-delay: 0s, 1s;
-ms-transition-property: background, margin-left;
-ms-transition-duration: 1s, 1s;
-ms-transition-delay: 0s, 1s;
transition-property: background, margin-left;
transition-duration: 1s, 1s;
transition-delay: 0s, 1s;
background: #f00;
margin-left:0px;
}

.transp3:hover{
background: #f0f;
margin-left:50px;
}

Wie man im CSS3-Animationsbeispiel sehen kann, ändert sich zuerst die Hintergrundfarbe, danach die Position. Es ist mir nicht gelungen, dieses Beispiel mit der Kurzschreibweise umzusetzen.

Veränderung durch andere Ereignisse

Alle bisher beschriebenen Übergänge wurden durch das hover-Ereignis ausgelöst. Für bestimmte Anwendungsfälle wäre es aber sehr gut, wenn auch andere Ereignisse eine transition auslösen könnten. So wäre es zum Beispiel vorstellbar, dass eine Art Intro direkt nach dem Laden der Seite ausgeführt wird. Dazu mehr in Teil 2 der Beiträge zur CSS3-Animation.

skywalk-webdesign.de