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

Question

我有一张图片：

我想在鼠标悬停时旋转它，以给方块动画不同的颜色的错觉。然而，我只能采用以下方法：

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

如果我使用了animation和%步骤的关键帧，你可以看到标志物旋转，如果可能的话，我想让它跳到下一个deg值。如何在悬停时无限循环执行此操作？

- benhowdle89

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

- Andrew