修改

Question

我使用关键帧为一个块设置动画，然后在javascript中触发反转动画，如下所示：

$('#block').removeClass('animate1').addClass('animate2');

animate1和animate2对应于两个调用动画的CSS类（对于演示，仅在webkit中），#block对应一个简单的div：

CSS

.animate1 {
    -webkit-animation: shift 1s ease-in-out forwards;
}
.animate2 {
    -webkit-animation: shift 1s ease-in-out backwards reverse;
}
@-webkit-keyframes shift {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}

HTML

<div id="block" class="animate2"></div>

它根本不起作用。有关演示（Chrome 30），请参阅this fiddle。

事实

如果我反过来触发动画，我的意思是首先反转动画，然后是正常动画，它正常工作（demo）：

$('#block').removeClass('animate2').addClass('animate1'); //Works.

如果我删除当前类并添加具有通过单击按钮触发的独立函数的下一个类，它也会起作用。

有人能帮我理解这种奇怪的行为吗？我被卡住了！

修改

对于未来的访客，我不再寻找解决方法了，只是试图找出这里发生的事情：

浏览器需要什么“重置时间”？
为什么它在某种程度上起作用，而不是在另一种中起作用？
为什么在内部闭包中触发动画？

如果合适，我会更改接受的答案。

Answer 1

当您重复使用动画时，有时会继承它的状态。

这种情况发生的方式有点难以预测，因为它并不总是一致的（我想w3c标准也没有确切地说明在这种情况下会发生什么）。

在您的情况下，您正在重复使用应该发生一次的动画（animation-iteration-count：initial，即1），并且已经发生过一次。所以，没有任何反应。（确实，反过来说，但正如我之前所说的那样，这个问题并不总是一致的。）

解决问题的一种方法是重置过渡。

setTimeout(function () {
    $('#block').removeClass('animate1');
}, 1950);
setTimeout(function () {
    $('#block').addClass('animate2');
}, 2000);

暂时离开div而没有任何动画，因此有效地重置过渡。你现在遇到了div跳转到初始状态的问题，因此它不能正常使用;但我试图解释为什么你有问题。

工作解决方案可以像雅各布所说的那样通过过渡进行，或者创建不同的动画。

jumping demo

Answer 2

CSS3动画似乎适用于MDN's "Using CSS animations" developer guide建议的一次性或无限循环动画。

为了保持逻辑，我会切换到CSS3 transitions。

首先，在CSS中，让我们定义我们的猫照片可以在（左侧或右侧）的两个备用“状态”：

.transition1 {
    transition-property: left;
    transition-duration: 1s;
    left: 0px;
}
.transition2 {
    transition-property: left;
    transition-duration: 1s;
    left: 200px;
}

现在，使用您的JS，使用我们重命名的CSS类：

$('#swap1').click(function () {
    $('#block').removeClass('transition1').addClass('transition2');
});
$('#swap2').click(function () {
    $('#block').removeClass('transition2').addClass('transition1');
});

点击按钮，（猫照片）元素的left属性将在一秒钟内从0px过渡到200px（反之亦然）。这是我的代码：http://jsfiddle.net/u6jsC/。

使用Javascript反转关键帧动画

CSS

HTML

事实

修改

2 个答案: