保持css动画状态

Question

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

Answer 1

几天前，我真的在集思广益。假设您的问题是动画未达到100％的结果，那么您是正确的。问题是没有办法简单地选择表示动画在动画中制作它的距离的值。从这里，您有以下三个选项（注意：我没有测试所有选项）：

1. 您可以将动画分解为已定义的步骤（10％间隔，20％间隔等），然后只在其中一个步骤中暂停。这可能是最安全的解决方案，但您可能需要按时完成（即setInterval等等。 - 哎呀！）
2. 您可以使用JavaScript计算（也基于时间 - Double Yuck！）元素的位置，并相应地设置新的keyframe
3. 您可以尝试在动画暂停时查看元素的属性（我没有尝试过，我非常怀疑它会起作用）

Answer 2

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

动画实际上并没有改变css，它们只是为它制作动画，然后将它放回原处。你只需要使用javascript来保存css，比如

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

然后在暂停动画后，将其设置为

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

这样它就可以永久地设置在第一个动画放置的位置。

Answer 3

您在这里有一些选择：

1. 将新动画以不同的播放状态添加到列表中。这不是很可扩展，但是在某些情况下可以使用。
2. 使用getComputedStyle捕获动画值并自己应用。这样做的缺点是，对于transform，getComputedStyle返回的值将转换为matrix()值，因此 rotate 动画的插值有时会表现不同。
3. 使用commitStyles()为您完成。问题在于浏览器支持。它应该可以在最新的Firefox和Safari以及下一版的Chrome（在Canary中对我适用）中运行。

您可以在此处看到每种方法的演示：https://jsfiddle.net/birtles/8bv5of6n/14/