用于转换的过渡属性是什么？答案

【问题标题】：What transition-property to use for transform?用于转换的过渡属性是什么？
【发布时间】：2012-06-05 14:29:22
【问题描述】：

我不确定这是否正确，但我想旋转一个元素，
我知道transform: rotate(90deg) 和transition-property:all 会起作用，但我不想转换all 的转换
。我应该使用什么transition-property，有没有更好的方法来创建旋转动画？

【问题讨论】：

查看这篇文章 - stackoverflow.com/questions/2584138/…

标签： css css-transforms

【解决方案1】：

要在transition-property 上定位transforms，您应该使用：

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

【讨论】：

我认为 IE 永远不会在头部转换前缀，不是吗？

【解决方案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 */
}

【讨论】：