动画作品在CSS上的CSS3过渡，但不在Chrome上，为什么？

Question

在Firefox，当我将鼠标放置在元件的元件运行CSS3动画和鼠标移出动画还原：

http://jsbin.com/bapen/2/watch

在相同的代码的基础上，与所有的webkit供应商前缀，我不t具有相同的效果。所以，当鼠标悬停的元素旋转，但在鼠标悬停时，它不会以其他方式旋转回初始状态。

Firefox的行为更好，我猜这在Chrome上不受支持？

我之前提到过“动画过渡”的原因，就是当测试时，属性过渡：所有的0.45s，是什么使得它在FF上工作的原因。

不确定是否有经验的人可以提供一些提示？谢谢！

Answer 1

在玩了一段时间之后，似乎Chrome并没有自动反转关键帧动画。我不知道是否有一些选项来启用或任何东西，但如果你直接在:hover CSS规则中指定的变换，似乎整个Chrome和Firefox工作始终，即改变这个：

@keyframes rotateMe { 
    0% { 
    -webkit-transform-origin: center center; 
    -ms-transform-origin: center center; 
    transform-origin: center center; 
    -webkit-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 

    100% { 
    -webkit-transform-origin: center center; 
    -ms-transform-origin: center center; 
    transform-origin: center center; 
    -webkit-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 

@-webkit-keyframes rotateMe { 
    . . . 
} 

.rotateMe:hover { 
    animation-name: rotateMe; 
    -webkit-animation-name: rotateMe; 
} 

到这：

.rotateMe:hover { 
    -webkit-transform-origin: center center; 
    -ms-transform-origin: center center; 
    transform-origin: center center; 
    -webkit-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

然后期望的逆转效应似乎工作，至少它为我做。在这种情况下，它也少了代码，但显然如果您的真正目标是需要关键帧动画的东西，则此解决方案将无法工作。

为了清楚起见，我还需要注意的是，在原始Chrome中返回到初始状态（碰巧看起来就像最终状态），它只是立即做到了，而不是通过动画倒退。您可以通过以不是90度倍数的旋转结束来验证此情况。同样，如果您更改:hover规则中的背景颜色，则会看到它在两个方向上平滑过渡。