CSS3动画：数字计数？

Question

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

我知道可以使用动画持续时间线作为动画长度，只需将animation-iteration-count设置为无限，但是可以在每次重启时加载为“X + 1”。动画？

谢谢！

Answer 1

针对计数器的许多仅 CSS 选项的彻底解决方案是 this！

Answer 2

可以使用伪元素来完成内容属性的动画制作，但是对伪元素的CSS动画的支持仍然有些粗略。

一个免费的JS解决方案是将couting数字实际放在HTML中，然后在那些

之间制作动画

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

此处示例：JSFiddle

根据您对额外标记的感受，我可能会选择JS解决方案（那里有很多）。