Hi coders and designers, I am sure that you are excited for the new CSS3 Animation and CSS3 Transition modules , now it is pretty easy to make a beautiful animation using CSS3, so in this post I will show you how to manage them catching animation events with javascript.

Let’s start with a simple animation example:

At moment we have just one listener for a css3 transition ‘transitionend’ and as you can see on the example above you can easily detect in any browser when a transition is ended or started using jQuery.I am toggling a class on a div modifying its ‘margin-left’ and ‘box-shadow’ properties with a simple mouseover. The most interesting part is if an html element has setted ‘transition’ property from css every changes will be done using a transition:
for example you can change the color, border-radius, box-shadow…

Another interesting CSS3 module is ‘css3 animation’ that is a quite different from ‘css3 transition’ because it has a different syntax and it is perfect for complex animation (as you could do in a SWF file using flash timeline).
In this example I will show you how you could have the perfect control of your css3 animation using jQuery:

I hope you got everything you need to manage css transitions and animations, but remember this modules are only drafts and there is not a crossbrowser support so be careful using it!