用 JS 控制 CSS 动画？答案

【问题标题】：Controlling a CSS animation with JS?用 JS 控制 CSS 动画？
【发布时间】：2013-01-06 14:26:11
【问题描述】：

假设我有以下 CSS 动画：

@animation experiencebar {
    from {background:blue;width:0}
    80% {background:blue;width:100%}
    90% {background:yellow;opacity:1}
    to {opacity:0}
}

在英文中，蓝色条从空变为满，然后在淡出之前逐渐变为黄色。

有没有办法说“设置这个元素的样式，就好像它在动画的 50% 处一样”？（本例中，背景为蓝色，宽度为 62.5%）

如果是这样，是否有任何方法可以转换它，例如当获得经验时我可以将其转换为 70% 动画？更进一步，我可以将位置设置为 120% 以让动画填充条形图，使其淡出，然后似乎为下一个级别开始新的条形图吗？

或者这对于 CSS 过渡/动画来说是否过于牵强，应该在 JavaScript 中完成？

【问题讨论】：

Kolink，你应该检查一下是否可以用百分比混合从状态到状态，因为我以前没有见过。
from 是 0% 的别名，to 是 100% 的别名。它们是明确定义的。
其实...你可以通过设置animation-play-state在JavaScript中暂停和播放CSS动画（不是过渡）。不过，这不是追求精确度的正确方法。

标签： javascript css css-animations

【解决方案1】：

不幸的是，没有办法以您提到的方式直接操作 CSS 过渡。您可以使用不同的动画设置不同的类，并通过.setAttribute("class","classname") 方法简单地切换类。此外，您可以在 JavaScript 中操作特定属性，但这需要您将其更改回来；这比轮班要优雅得多。

【讨论】：

【解决方案2】：

目前无法从 javascript 访问动画，但我认为有一个解决此问题的方法。充分计算和使用过渡。您可以拥有具有不同转换属性的不同类，并且在 javascript 中您可以应用您想要的类。此方法将从 javascript 显示您所需的动画。

【讨论】：

哦，我们实际上写了相同的答案。 +1。
因为它是我们能想到的最佳答案 :) 它只是 Bagavatu 的时机。 +1