Geek asks and answers

What transition property is used for conversion?

I'm not sure if this is the right way, but I want to collapse the element,
and I know that transform: rotate(90deg)they transition-property:allwill work, but I do not want to go over. all
Which transition-propertyone should be used, and is there a better way to create a rotating animation?

+5
source share
2 answers

To target transformon transition-property, you would use:

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
+20
source

Maybe not the best way, but alternatively you can use animated keyframes (which is better if you want to constantly repeat the animation):

@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 */
}
+2
source

More articles:


All Articles