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?

回答1:

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;

回答2:

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 */
}

来源：https://stackoverflow.com/questions/10831795/what-transition-property-to-use-for-transform