Animieren mit Webkit und CSS

Wer meine Seite mit dem Safari oder dem Chrome besucht, der wird bemerken, dass sich hier ziemlich viel bewegt. Dies geschieht dank der grossartigen Fähigkeit von Webkit, dass Elemente per CSS animiert werden können.

Teil 1: Einfache Animation

In diesem Beitrag geht es zunächst um die einfache Animation eines CSS-Elementes. Das Steuern der Animantion (z.B. per Klick) zeige ich dann in Teil 2.

Zunächst brauchen wir erstmal ein beliebiges CSS-Element, z.B. ein DIV.

#block {
display:block;
height:100px;width:48px;
background:red;
}

Dem Element sagen wir anschließen, wie die Animation ablaufen soll (Dauer, etc).

#block {
display:block;
height:100px;width:48px;
background:red;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-name:farbe;
}

-webkit-animation-duration legt die Dauer der Animation fest (hier 5 Sekunden), -webkit-animation-timing-function die Art des Überganges (linear, ease-in, ease-out), webkit-animation-iteration-count: infinite wiederholt die Animation und -webkit-animation-name definiert die Art der Animation.

@-webkit-keyframes farbe {
from { background:red }
to { background:green }
}

In unserer Animation farbe wird lediglich die Hintergrund-Farbe verändert. Hier kann jedoch alles stehen. Border, Opacity, Transform … was auch immer. Es gibt keine Grenzen.

Neben dem Steuerung mit from (Start) und to (Ende), kann auch in kleinen Schritten gearbeitet werden. So lässt sich die Animation zudem in Prozenten angeben.

@-webkit-keyframes farbe {
0% { background:red }
50% { background:green }
100% { background:red }
}

Das soll es dann auch schon für heute gewesen sein.

Das steuern einer Animation mit Javascript erfolgt in Teil 2 (irgendwann).

Quelle: Safari CSS Visual Effects Guide: Animations