Question

我已经访问了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来看一看。

Answer 1

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

JSFiddle证明了答案。

Answer 2

试试这个：

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

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

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

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

2 个答案: