Usibility war gestern, wie man bei mir eindrucksvoll sieht. Alles dreht sich und keiner findet mehr was...
|
Animieren mit Webkit und CSSWer 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 AnimationIn 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.
Dem Element sagen wir anschließen, wie die Animation ablaufen soll (Dauer, etc).
-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.
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.
Das soll es dann auch schon für heute gewesen sein. Das steuern einer Animation mit Javascript erfolgt in Teil 2 (irgendwann). |
