How to transition only rotate transformation?

Question

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?

transition transform IS allowed. What I guess is happening is that the center rotation is not where you expect. Anyway, is MY guess. May be better post a fiddle with your code. — vals, Jul 10 '13 at 19:03
I found where the problem was! I forgot to define the -webkit- prefix... How dumb! Thank you guys anyway! — Digger, Jul 12 '13 at 13:25

score 26 · Accepted Answer · edited Apr 12 '14 at 16:02

26

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;

edited Apr 12 '14 at 16:02

Igor

166
5

answered Sep 09 '13 at 16:45

Conqueror

3,743
6
32
40

1

-ms-transition don't exist – r1si Jan 12 '18 at 09:40

score 12 · Answer 2 · edited Jun 20 '20 at 09:12

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;

How to transition only rotate transformation?

2 Answers2

Note