CSS3动画:数字递增？

Question

我正在尝试使用CSS3创建一个计数动画，它从某个数字"X“开始，使用类似于this的动画，以设定的间隔+1计数。

我知道可以使用动画持续时间行作为动画长度，只需将动画迭代计数设置为无限大，但是否可以在每次重新启动动画时将其加载为"X+1“？

谢谢!

Answer 1

具有许多仅用于计数器的CSS选项的彻底解决方案是this！

Answer 2

这也许可以用一个伪元素来完成，您可以在其中为content属性设置动画，但是对伪元素上的CSS动画的支持仍然有些粗略。

一个JS-free的解决方案是将计数数字实际放在HTML中，然后用

-webkit-animation-timing-function: steps(X);

示例如下：JSFiddle

根据您对额外标记的感觉，我可能会选择JS解决方案(有很多)。