保持css动画状态答案

【问题标题】：keep css animation state保持css动画状态
【发布时间】：2013-07-02 17:04:41
【问题描述】：

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

【问题讨论】：

我不确定动画是否应该这样工作。为什么要在动画中途更改课程？如果您想要一个复杂的动画，只需使用更多关键帧制作一个复杂的动画。

标签： javascript css animation css-animations

【解决方案1】：

实际上，我几天前正在集思广益。您假设您的问题是动画未达到 100% 的结果是正确的。问题是没有办法简单地选择指示动画在动画中的距离的值。由此，您有以下三个选项（注意：我没有测试所有选项）：

您可以将动画分成定义的步骤（10% 间隔、20% 间隔等），然后仅在其中一个步骤上暂停动画。这可能是最安全的解决方案，但您可能必须按时使用（例如，setInterval 等 - 糟糕！）
您可以使用 JavaScript 计算（也基于时间 - Double Yuck！）元素的位置，并相应地设置一个新的keyframe
您可以尝试在动画暂停时查看元素的属性（我没有尝试过，我非常怀疑它会起作用）

【讨论】：

“您可以尝试在动画暂停时查看元素的属性（我没有尝试过，我非常怀疑它会起作用）” - 这绝对有效。您甚至不需要暂停动画。所有浏览器都将通过getComputedStyle 提供动画值。

【解决方案2】：

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

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

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

然后在暂停动画后，用

设置

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

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

【讨论】：

【解决方案3】：

你有几个选择：

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

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

【讨论】：