jQuery transit will probably make your life easier if you are dealing with CSS3 animations through jQuery.
EDIT March 2014 (because my advice has constantly been up and down voted since I posted it)
Let me explain why I was initially hinting towards the plugin above:
Updating the DOM on each step (i.e. $.animate ) is not ideal in terms of performance.
It works, but will most probably be slower than pure CSS3 transitions or CSS3 animations.
This is mainly because the browser gets a chance to think ahead if you indicate what the transition is going to look like from start to end.
To do so, you can for example create a CSS class for each state of the transition and only use jQuery to toggle the animation state.
This is generally quite neat as you can tweak you animations alongside the rest of your CSS instead of mixing it up with your business logic:
// initial state
.eye {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
// etc.
// transition settings
-webkit-transition: -webkit-transform 1s linear 0.2s;
-moz-transition: -moz-transform 1s linear 0.2s;
transition: transform 1s linear 0.2s;
// etc.
}
// open state
.eye.open {
transform: rotate(90deg);
}
// Javascript
$('.eye').on('click', function () { $(this).addClass('open'); });
If any of the transform parameters is dynamic you can of course use the style attribute instead:
$('.eye').on('click', function () {
$(this).css({
-webkit-transition: '-webkit-transform 1s ease-in',
-moz-transition: '-moz-transform 1s ease-in',
// ...
// note that jQuery will vendor prefix the transform property automatically
transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
});
});
A lot more detailed information on CSS3 transitions on MDN.
HOWEVER There are a few other things to keep in mind and all this can get a bit tricky if you have complex animations, chaining etc. and jQuery Transit just does all the tricky bits under the hood:
$('.eye').transit({ rotate: '90deg'}); // easy huh ?