2

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

4

2 回答 2

2

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

于 2013-01-06T06:26:11.960 回答
1

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

于 2013-01-06T06:18:48.777 回答