How to transition only rotate transformation?

I'm using a bunch of elements to compose a background image and they all absolutely position around, rotating freely.

Problem is, I would like to transition only the rotation of those objects, not the top nor left properties. And apparently transition: transform 30s; isn't allowed. I had the brilliant idea of doing

transition:all 30s ease-out; transition: left 0s; transition: top 0s; 

But that also doesn't work. How can I solve this?

2 Answers

Transform is a vendor prefix

Instead of

transition:all 30s ease-out; transition: left 0s; transition: top 0s; 

do

-webkit-transition: -webkit-transform $amount-of-time ease-out; -moz-transition: -moz-transform $amount-of-time ease-out; -o-transition: -o-transform $amount-of-time ease-out; -ms-transition: -ms-transform $amount-of-time ease-out; transition: transform $amount-of-time ease-out; 

To animate only the rotate property, I found this works in at least Chrome:

transition: transform 2.0s; 

You can set different animation times for different properties inside the one transition property:

transition: transform 2.0s, color 5.0s, font-size 1.0s; 

The trick with the rotate property specifically is that you have use the transform property instead. Intuitively, this should work but does NOT work:

transition: rotate 2.0s; /* DOES NOT WORK */ 

Instead you have to use transform in place of rotate:

transition: transform 2.0s; 

This is probably because rotate: 90deg is shorthand for transform: rotate(90deg)

Note

transition is now supported in the latest versions of all major browsers. I assume if you want more compatibility with older browsers, you might do something like:

-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s; -moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s; -ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s; -o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s; transition: transform 2.0s, color 5.0s, font-size 1.0s;