css - CSS3 动画：数数？

Question

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

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

谢谢！

Answer 1

这是一个包含许多仅 CSS 选项的计数器的彻底解决方案！

Answer 2

可以使用伪元素来为内容属性设置动画，但是对伪元素上的 CSS 动画的支持仍然有些粗略。

一个无 JS 的解决方案是将计算数字实际放在 HTML 中，然后在它们之间进行动画处理

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

此处示例：JSFiddle

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