CSS Animation Examples
Falling Blocks
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
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
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.




May 9th, 2009 at 8:15 pm
[...] Guitar Lesson created an interesting post today on CSS Animation ExamplesHere’s a short outlineCSS Animation Examples. Falling BlocksThis is a falling blocks sample that’s an example of a one-way animation. By that, I mean that the… [...]
June 9th, 2009 at 12:16 pm
Hey i checked the examples but nothing is happening. Am I missing something??
June 9th, 2009 at 12:44 pm
Rahul, you most likely aren’t using a webkit-based browser. For best results, you need to use Google Chrome or Apple Safari, the latest versions of each being the best available.
October 21st, 2009 at 10:08 am
[...] These various browser-specific properties can achieve rotation as demonstrated on Jonathan Snook’s blog. It’s cool, but not quite what I’m wanting to achieve. After more digging I found a method of animating rotation in webkit based browsers. [...]
October 28th, 2009 at 2:37 am
While vast majourity of web users are not much aware about anything about webkit based browsers and even those who have heard of them simply don’t want to switch to them Who is going to dare working with such CSS features in real world?
i fear these are gonna add up to the list of just for fun technologies only.
-rineez-
Livares InfoTech
http://www.livares.com
February 13th, 2010 at 11:04 am
[...] These various browser-specific properties can achieve rotation as demonstrated on Jonathan Snook’s blog. Great, but not quite what I’m wanting to achieve. After more digging I found a method of animating rotation in webkit based browsers. [...]
March 2nd, 2010 at 3:03 pm
You got me started, Thanks! I have a FLASH 3.0 website of animated musical presentations and you have allowed me to reproduce every effect i achieved with Flash 3.0. I just had a break through using javascript to create a timeline controlling actors (elements?) entering and exiting the stage. stumbling along…
April 23rd, 2010 at 12:03 am
Do you really think chrome and safari are going to replace ie and mozilla. we have to get to uniformity…not try to break the mold
September 2nd, 2010 at 6:50 am
@Tom : IE 9 and Firefox 4 will support that.
October 30th, 2010 at 4:36 pm
I don’t understand how you can post this and not include ‘w/ use of jQuery and JavaScript’. When you’re going to use JS to create the animation, there is no point in saying CSS did it. It seems like all you’ve created are more things that possibly won’t show up in the users browser.
November 1st, 2010 at 1:49 pm
The animated effects displayed here were all done at the CSS level, not in Javascript. Javascript was used for trivial parts of the code, such as adding click handlers. In any case, Javascript is the de-facto way of interfacing with an HTML DOM, so it’s usage should be pretty non-controversial here. Yes, these examples won’t work in many browsers. That was the point in creating them – to explore a new technology as it is emerging.
September 9th, 2011 at 12:51 pm
Check this one out – http://cssload.net It’s the first loading CSS animation generator. It’s cool.
February 2nd, 2012 at 3:02 pm
Great tutorials. I used the falling blocks tutorial except that I want the original text to reload to its original position some time after the falling happens. How do I make this happen?