CSS3动画变换旋转，无可见过渡

因此，我有一个图像：

我想在悬停状态下旋转它，让方块产生不同颜色的动画效果。然而，我不得不满足于：

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

---

就像我使用了

动画

和带有%step的关键帧一样，您可以看到徽标旋转，如果可能的话，我希望它捕捉到下一个

deg

值。我如何在悬停时无限地执行此操作？

您可以使用计时功能

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

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