How to control CSS3 Animations and CSS3 Transitions using jQuery


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!

One Comment

  • Some really nice stuff here, although i was wondering if you could do a short article on “Time delayed restarts”.

    Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>