如何防止旋转后动画重置？答案

【问题标题】：How to prevent animation reset after a rotation?如何防止旋转后动画重置？
【发布时间】：2014-07-31 00:13:46
【问题描述】：

我已经访问过this 问题。但是，-webkit-animation-fill-mode: forwards; 似乎并不能阻止旋转动画后的重置。

此代码导致旋转完成后跨度恢复到正常状态：

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

.spin:hover span
{
    -webkit-animation: spin 0.8s;
    -webkit-animation-fill-mode: forwards;
}

但是，这段代码，不是轮换，是有效的：

@-webkit-keyframes shove
{
    0%   { margin-left: 0px; }
    100% { margin-left: 50px; }
}

.shove:hover span
{
    -webkit-animation: shove 0.8s;
    -webkit-animation-fill-mode: forwards;
}

这里有一个JSFiddle 来看看。

【问题讨论】：

标签： html css

【解决方案1】：

我发现了问题。由于某种原因，如果元素是inline，旋转动画会重置。通过将span 显示为block 或inline-block，动画在旋转后不会重置。

JSFiddle 演示答案。

【讨论】：

为我工作！谢谢！

【解决方案2】：

试试这个：

.spin {
-webkit-transition: all 0.8s linear;
}

.spin:hover {
-webkit-transform: rotate(180deg);
}

更新小提琴：http://jsfiddle.net/52KN7/17/

【讨论】：