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 Transition。您可以使用不同的动画设置不同的类，只需通过.setAttribute("class","classname")方法转换类。此外，您可以在JavaScript中操作特定属性，但这需要您将其更改回来;这比改变班级要优雅得多。

Answer 2

现在无法从javascript访问动画，但我认为有一个问题可以解决。完全计算和使用过渡。您可以使用具有不同过渡属性的不同类，在javascript中，您可以应用所需的类。此方法将从javascript显示您所需的动画。

用JS控制CSS动画？

2 个答案: