保持css动画状态

Question

我正在将css关键帧动画应用到元素。我只为一个简单的变换指定了一个关键帧（100％）。当动画运行时，我使用动画playstate暂停并应用指定不同关键帧动画的类。我想要的是第二个动画从第一个动画被中断的地方开始，而元素跳回到它的开始位置并从那里开始动画。我用动画填充模式玩了一下，但它并没有改变，我认为是因为动画在它达到100％之前被打断了。任何想法我可以做什么使这项工作？

Answer 1

几天前，我实际上正在集思广益。假设你的问题是你的动画未达到100％的结果，你是正确的。问题在于没有办法简单地选择这些值来指示动画在动画中做了多少距离。从此，您有以下三种选择（注：我没有测试过所有的人）：

1. 可以打破动画到定义的步骤（10％区间，20％的时间间隔等），然后只暂停其中的一个步骤。这可能是最安全的解决方案，但您可能必须按时（例如，setInterval等 - Yuck！）
2. 您可以计算（也基于时间 - 双Yuck！）元素是，使用JavaScript中，并成立了新的keyframe相应
3. 你可以尝试一下元素的属性在那个动画暂停（我还没有尝试这样做，我很怀疑这将工作）的时间

Answer 2

http://jsfiddle.net/gxve9/1/

动画并没有改变css，他们只是动画，然后把它放入bac k它在哪里。你只需要使用JavaScript保存使用的东西像CSS

var prevWidth = $("div").css("width");

，然后暂停动画后，与

$("div").css("width",prevWidth);设置。

这样它就会永久保持第一个动画放置的位置。