CODEWITHSUNDEEP
cssrotationtransition
Digger
Digger

Reputation: 738

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?

Upvotes: 29

Views: 50595

Answers (2)

Chris Dutrow
Chris Dutrow

Reputation: 50422

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;

Upvotes: 19

Conqueror
Conqueror

Reputation: 4443

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;

Upvotes: 29

Related Questions