css 数字从0开始动画

要实现数字从0开始的动画，可以使用CSS中的@keyframes规则和animation属性。

首先，需要创建一个CSS动画序列，可以使用@keyframes规则来定义动画的关键帧。在这个序列中，可以指定动画的开始和结束状态。

下面是一个示例的CSS动画序列，将数字从0逐渐增加到100：

@keyframes count-up {
  0% {
    content: "0";
  }
  100% {
    content: "100";
  }
}

在这个示例中，通过content属性来指定数字的值，并使用百分比来表示动画的进度。

接下来，需要将动画应用到元素上。可以使用animation属性来实现。下面是一个示例的CSS样式，将动画应用到一个元素上：

.number {
  animation: count-up 5s linear infinite;
}

在这个示例中，将count-up动画应用到一个类名为number的元素上。动画的持续时间为5秒，使用线性的动画效果，并且设置为无限循环。

最后，将HTML中的元素应用这个样式即可：

<div class="number"></div>

这样，就可以看到数字从0开始逐渐增加的动画效果了。

注意：上述示例中使用了content属性来直接显示数字，这是CSS中的一个伪元素属性，可以用在::before和::after伪元素上。如果要在普通的HTML元素上显示动态的数字，可以通过JavaScript来实现