使用CSS3或JS的连续旋转动画？

Question

I have some objects in an animation which are continously animating in a rotation back and forth using css3. To do this I have created a declaration like so:

@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}

And each object I want to use this for I do the following:

.p4, .p5, .p6 {
-webkit-animation-name: wiggle; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: ease-in-out;
}

Since I want some random between each of the objects I have the following altering animation durations:

.p4 {
-webkit-animation-duration: 5s; 
}

.p5 {
-webkit-animation-duration: 7s; 
}

.p6 {
-webkit-animation-duration: 8s; 
}

And so on...

This works ok - (only testing in Chrome so far). But it doesn't seem to be very optimal.

I would like to know whether there is a faster way to achieve this. Or a leaner way. I believe I could perform this with JS but I'm not sure what is going to be more lightweight on the end users resources.

Is there a better way to achieve this sort of basic animation with less resources - and if so, how?

In addition to this, if I were to create this same animation using jquery for example, how could I actually test the memory usage required? I found something recently to test memory usage of tabs but it appears the results are inconsistent. ie sometimes 1 tab is using more memory than the other and vice versa even though the code remains the same.

Thanks for any pointers.

Answer 1

Stick with the CSS3 animations if they work as intended, and if needed do something in JS as a fallback for non supporting browsers.

Replacing the CSS3 with JS is not really leaner or less resource intensive, quite the opposite as CSS3 seems to have smoother animations and in some browsers will use hardware accelaration and the GPU, something not possible with JS (at least not easily).

All in all you'll end up writing more in JS, and perhaps use a library or plugin for rotating animations as well. It will be less smooth in most browsers, and use more resources as well as JS will have to set the css tranform values several times each second for a somewhat smooth animation.