Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am developing an app using PhoneGap and jQuery, and am a little confused about animations.

I decided to go with what I already knew, which was jQuery animate, and this worked great, except I came across people talking about hardware acceleration.

All I am doing is animating a div to move right on page load:

$("#"+that).find('.captionShine img').animate({left: '550'},700);

I found a plugin called jQuery-Animate-Enhanced which turns these animations into CSS3 transitions, therefore hardware accelerating them (I believe).

So I looked more into the CSS3 animations, and am confused as to the difference between transitions and animations in CSS3. Can I still use hardware accleeration on the CSS3 animations? Or can it only be done on transform: translate3d(0,0,0);?

Is it just a case of assing translate3D to any element I want to have hardware accelerated?

share|improve this question
add comment (requires an account with 50 reputation)

1 Answer

up vote 0 down vote accepted

kirupa has a very good explaination here: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

Skip down to read his conclusions bullet point first and then start reading from the top to fill in the details. Basically, transition and animation are two different way you define animation in css. Below is my own translation of the author conclusion.

  • Transition allow you to do very simple css that animate from a to b. Imagine you have an element with class="from-a" then you add a class to that element called class="to-b". Your transition definition in class="to-b" is where your animation ends.

  • Animation allow you to define/orchestrate the entire animation using keyframe css definition. Keyframes allow you to breakdown and orchestrate series of complex animations.

  • As you can see, because Transitions are based on adding of class or style to an element. You can easily define a series of classes and use with javascript+timeout to set these class and create the same kind of orchestration as Animation.

share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.