Meine erste CSS3 Animation

Wie man mit einfachen Mitteln "Leben in die Bude" bringen kann

Geschätzte Lesezeit: 3 Minuten

Seit CSS3 kann man alle Elemente animieren, die durch CSS ansprechbar sind. Kein Flash, keine GIF-Animation, keine datenlastigen Videos sind mehr nötig. Eine wunderbare Innovation!

Ein kleiner Nachteil der CSS3 Animation gegenüber der Flash Animation ist, dass derzeit noch nicht alle alle alle Browser in der Lage sind, die entsprechenden Befehle zu interpretieren. Der IE8 versteht keine CSS3 Animationen, der IEMobile 9 leider auch noch nicht. Doch alle modernen Webkit Browser (Safari, Chrome, Iron), Gecko (Firefox), Opera und auch der IE9 sind dafür gerüstet. Also seien wir ehrlich, FAST alle Browser verstehen CSS3 Animationen. Und nicht vergessen: Nicht jede UserIn hat einen Flashplayer. Ich setze auf CSS3. Diese vom W3C gehütete Sprache ist unverwüstlich und aus dem Netz nicht mehr wegzudenken – im Gegensatz zu Plugins, deren Evolution abhängig ist vom Gutwill einzelner Unternehmen (so wie beispielsweise Adobe für Flash Video verantwortlich ist).

Meine erste CSS3 Animation soll ein kleiner Zeitmesser sein. Die durchschnittliche Aufenthaltsdauer der Leser von Granaton beträgt laut Statistik 31-60 Sekunden pro Besuch. Ich möchte das Granaton Logo in 60 Sekunden einmal um den eigenen Mittelpunkt rotieren lassen – eine Art symbolische Uhr, die dem Besucher ein Gefühl von Dauer und Beständigkeit vermittelt. Das geht so:

Das Granaton-Logo ist ein Bild mit der Class logo-img. Diese ist eingepackt in die ID logo-wrapper. Ich bringe zuerst die Größe des logo-img in ein quadratisches Format (andernfalls würde sich das quadratische Bild nicht um seinen eigenen Mittelpunkt drehen, sondern um den Mittelpunkt des logo-img und würde eine elliptische Bahn ziehen). Anschließend definiere ich über Keyframes eine Bewegung und nenne sie „drehung“. Einmal definiert für Webkit-Browser, einmal für Mozilla-Browser, einmal für Opera und dann noch einmal ohne Definition für alle anderen einschließlich IE. Wer auf Nummer Sicher gehen möchte, kann auch noch Werte für Microsoft („ms“) definieren. Diese Bewegung gebe ich dem logo-img als Animation mit auf den Weg:  Der NAME der Animation ist „drehung“. Die WIEDERHOLUNG der Bewegung stelle ich auf „infinite“, sie hat folglich kein Ende. Das TIMING stelle ich auf „linear“, so ist die Bewegung immer gleichmäßig und wird nicht schneller oder langsamer. Und die DAUER stelle ich auf sechzig Sekunden. So wie bei einer Armbanduhr mit Sekundenzeiger. Fertig. Funktioniert. Schön. (y)


@-webkit-keyframes drehung {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes drehung {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-o-keyframes drehung {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes drehung {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

#logo-wrapper .logo-img {
width: 10em;
height: 10em;

-webkit-animation-name: drehung;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 60s;

-moz-animation-name: drehung;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 60s;

-o-animation-name: drehung;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 60s;

animation-name: drehung;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 60s;

<Nachtrag>

Nach dem Wechsel meines Themes von Sampression auf Senna deaktivierte ich das sich drehende Logo. Es erschien mir im Kontext des sehr minimalistischen Umfeldes, das ich angestrebt hatte, als zu auffällig. Stattdessen habe ich den CSS3 Befehl „transform: rotate“ mit einer „transition: duration“ kombiniert, damit sich ein zartes Hover:Event ergibt, wenn man mit dem Logo interagiert. Auch wenn so manche Onlinemarketeers der Ansicht sind, Bewegtbild würde von UserInnen als Werbung klassifiziert, so bin ich der Meinung, dass gezielt eingesetzte Bewegung / Animation, die zum Design der Seite passt, den Charakter einer jeden Website entscheidend verbessern und beleben kann.

</Nachtrag>

Teilen Sie Ihre Meinung mit