Falling Blocks

Falling Blocks CSS Animation

This is a falling blocks sample that’s an example of a one-way animation. By that, I mean that the animation doesn’t reverse itself. This is accomplished by using the onclick event instead of something like a hover event. The core animation works in the latest version of Google Chrome and Safari 4.0+, both of which support -webkit-transition-delay and -webkit-gradient. The transition effects used in this example are scale, rotate, and position.

Cancellable Transitions

Repeatible Rotation Example

User interaction with CSS animation is a bit of a task. One of the more obtuse elements of CSS animations is how to cancel and restart transformations on demand. If you click on this example a bunch of times rapidly, you’ll see how subsequent clicks cancel the previous ones and the animation restarts. It turns out that you have to update the -webkit-animation-name property to get this effect (though it may be possible in a simpler way, I would guess). On top of that, you can’t just clear it using an empty string, you must actually reset it to a different value than restore the original value. This example also showcases -webkit-box-reflect.

Buffered Transitions

Buffered Repeatible Rotation

This example is very close to the previous one, but it shows how an animation effect can be buffered instead of cancelled when there are multiple mouse clicks. Click like mad on this one and notice how the rotation period increases. Here is an example of this animation where it only rotates a portion of the full way, better showing that this technique can be used on objects that are already in a transformed state.

Next, onto page 2 ->

Or, Check out how to animate jQuery UI ->