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

Question

所以，我有一张图片:

我想在悬停时旋转它，以产生正方形动画不同颜色的错觉。但是，我不得不满足于:

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

就好像我使用了 animation 和带有 % step 的关键帧，你可以实际看到 Logo 旋转，我希望它捕捉到下一个 deg 值，如果可能的。我怎么能在悬停时无限地执行此操作？

Answer 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