Yet another example of how easy it is to design animations with the new CSS 3 primitives.

Click on the picture to see the live version.
It works on Chrome, Safari and Firefox.
Yet another example of how easy it is to design animations with the new CSS 3 primitives.

Click on the picture to see the live version.
It works on Chrome, Safari and Firefox.
RSS feed for comments on this post. TrackBack URL
Hey, do you think i might get a peek at the css for the bouncing balls?
Comment by Ruben — July 24, 2011 @ 8:11 pm
Sure, please do: it’s not obfuscated (although it is referenced in an iframe of the main post)
Comment by David Corvoysier — July 25, 2011 @ 12:38 am
Hey, sorry to bug you again, but even after looking at your css I can’t figure out what is providing the balls with the arc’ing motion, in fact I can’t see whats causing them to move. Basically I myself am trying to make a single ball that comes in from off the screen and bonces a few times before reaching the other side of the screen but I wanted the ball to arc while bouncing just as the balls in this example do. I’m now wondering if its the ease-in thats providing it with that effect.
Comment by Ruben — July 25, 2011 @ 8:26 am
Ruben,
try giving vertical and horizontal animation at same time.
@-webkit-keyframes bounce {
0% {
}
100% {
bottom:0px;
}
}
@-webkit-keyframes slide {
0% {
}
100% {
right:0px;
}
}
Comment by monaye — August 8, 2011 @ 7:04 pm