[分享]css3数字增加动画

CSS3数字增加动画可以为网页添加更多互动性和视觉效果，给用户带来更好的用户体验。

/*代码展示*/
.counter {
  font-size: 2rem; /*设置字体大小*/
  font-weight: 600; /*设置字体加粗*/
  color: #333333; /*设置字体颜色*/
  text-align: center; /*设置文本居中*/
  animation: increment 2s ease-out forwards; /*使用动画效果*/
}

@keyframes increment {
  from {
    opacity: 0;
    transform: translateY(-10px); /*数字向上偏移10个像素*/
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 

使用这种动画效果的关键是要将数字元素包裹在一个父容器中，这样才能使数字在父元素中居中，并且动画效果也能被父元素触发。

在CSS3中，我们可以使用动画关键字来实现数字增加的动画效果。在上述代码中，我们使用了“increment”这个动画名称，并把动画效果属性写在了@keyframes里面。

其中，from里面的属性定义了数字从哪个状态开始变化（即透明度为0，向上偏移10像素），to里面的属性定义了数字变化到什么状态（即透明度为1，向上偏移0像素），这两个状态之间的动画效果会被自动补充。

通过这种方式，我们可以用CSS3实现数字增加的动画效果，并通过调整动画属性，来改变动画效果的时间间隔、运动方式等属性。