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.
Pingback: Topics about Animation | CSS Animation Examples
Hey i checked the examples but nothing is happening. Am I missing something??
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.
Pingback: Blog : jackappleby.com : Web developer / designer portfolio
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
Pingback: Jack Appleby ~ Notebook ~ Making stuff spin around
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…
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
@Tom : IE 9 and Firefox 4 will support that.
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.
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.
Check this one out – http://cssload.net It’s the first loading CSS animation generator. It’s cool.
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?