Webkit: CSS-Animation

von meggs | 0 | 6160 Aufrufe

Anzeige Hier werben

Kein JavaScript, kein Flash und auch sonst nur schlankes CSS. Mit den neuesten Nightly Builds von Apples Webkit-Engine ist es möglich, DIVs und ähnliches durch die Gegend zu schieben.

Auf dem offiziellen Weblog des Entwicklerteams sind einige CSS-Eigenschaften zu sehen.

Bild zu Webkit: CSS-Animation
Pulse

Zum Beispiel...

Definition des Animatioseffekts  
css
1
2
3
4
5
6
7
8
@-webkit-keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}
Animation  
css
1
2
3
4
5
6
div {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

...und noch viele weitere.

Öffnet man dieses Beispiel (Pulse), dieses (Bouncing box) oder dieses (Falling Leaves) mit dem aktuellen Webkit-Browser sieht man die Animationen.

Über den Autor: meggs
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten