CSS3动画变换旋转没有可见的过渡

【问题标题】：CSS3 animation transform rotate with no visible transitionCSS3动画变换旋转没有可见的过渡
【发布时间】：2014-03-10 16:56:55
【问题描述】：

所以，我有一张图片：

我想在悬停时旋转它，让方块产生不同颜色的动画效果。但是，我不得不接受：

.logo:hover {
    transform: rotate(90deg);
}

就好像我使用了animation 和带有% 步长的关键帧一样，您可以实际看到徽标旋转，如果可能的话，我希望它捕捉到下一个deg 值。如何在悬停时无限执行此操作？

【问题讨论】：

标签： css animation

【解决方案1】：

您可以使用定时功能steps，

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

.logo:hover {
    -webkit-animation: rotate 1s infinite steps(2, start);
}

http://jsfiddle.net/g3M2C/

https://developer.mozilla.org/en/docs/Web/CSS/timing-function

【讨论】：