css - 更改 CSS3 Rotate Transitiion 的 End 行为

Question

我在一个按钮上有一个旋转（360度）CSS转换，默认css是旋转（0度）。

当应用该rotate(360deg) 值的类不再存在时，浏览器会自动倒回到默认的rotate(0deg)。

默认情况下，随着动画顺时针方向，我宁愿最终行为是顺时针方向继续到默认值 0，而不是回滚（逆时针方向）。

我可以指定这种行为吗？

Answer 1

我认为你还不能，反正我不知道。我试图自己得到类似的东西。很确定 Jquery 会完成这项工作，我实际上并没有这样做，但它应该是这样的

$("#container").rotate({ 

绑定：{ mouseover : function() { $(this).rotate({animateTo:360}) },

 } 

});

编辑对不起，它是一个 JQuery 插件，不包含在其中。这是一个链接http://code.google.com/p/jqueryrotate/wiki/Examples

第二次编辑认为我已经使用关键帧解决了它。将其放在您的 css 文件中的任何位置：

@-webkit-keyframes Rotate {
0% {
    -webkit-transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(360deg);
} }

然后把它放在你的悬停动作中：

.button:hover{
-webkit-animation-name: Rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear; 
}

应该做你想做的，为我工作。