用JS控制CSS动画？

Question

假设我有以下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中完成？

Answer 1

不幸的是，没有办法像你提到的那样直接操作CSS转换。您只需使用不同的动画设置不同的类，并通过.setAttribute("class","classname")方法在类之间切换即可。此外，您可以在JavaScript中操作特定的属性，但这需要您将其改回；这远不如移动类优雅。

Answer 2

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