CODEWITHSUNDEEP
csscss-transforms
ilyo
ilyo

Reputation: 36391

What transition-property to use for transform?

I'm not sure if this is the right way, but I want to spin an element,
and I know transform: rotate(90deg) & transition-property:all will work, but I don't want to transition all of the transformations
. What transition-property should I use, and is there a better way to create a spinning animation?

Upvotes: 8

Views: 15797

Answers (2)

Someone
Someone

Reputation: 95

Maybe not a better way, but alternatively you can use animation keyframes (which IS better if you want to repeat the animation continuously):

@keyframes rotateDiv {
   from { transform: rotateZ(0deg); }
   to   { transform: rotateZ(360deg); }
}

div {
   animation-name: rotateDiv;
   animation-duration: 1s;
   animation-timing-function: linear; /* For a steady rate loop */
   animation-delay: 0s;            
   animation-iteration-count: infinite; /* Use actual numbers for limited repeat */
}

Upvotes: 2

Giona
Giona

Reputation: 21114

To target transforms on transition-property you should use:

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;

Upvotes: 24

Related Questions