我不确定这是正确的方法,但我想旋转一个元素,
我知道transform: rotate(90deg)
& transition-property:all
可行,但我不想转换all
我应该使用transition-property
,有没有更好的方法来创建旋转动画?
答案 0 :(得分:21)
要在transform
上定位transition-property
,您应该使用:
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
答案 1 :(得分:2)
也许不是更好的方法,但也可以使用动画关键帧(如果你想连续重复动画,那就更好了):
@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 */
}