1、背景：
可视化大屏想要页面看起来不那么死板的话，可以做一些动态效果，实现方式有很多，比如具有动效的图片、视频，CSS样式，CSS+JS等来实现。主要是利用animation属性****+ @keyframes来实现
本文主要使用CSS样式实现动效，利用JS控制生效的时间间隔
2、实现效果：
数字滚动
3、效果图的完整代码：
CSS样式：
.scroll-animation {animation: scroll 1s; // 1秒的动效animation-fill-mode: forwards; /* 保持动画结束状态 */
}
@keyframes scroll {from {opacity: 0;transform: translateY(100%);}to {opacity: 1;transform: translateY(0);}
}
JS控制动效的间隔时间（若需求动态频率在几秒内 可以不需要JS来控制，直接在 animation把时间设置高一点）
const isShowAnimation = ref(false);
function triggerAnimation() { // 控制页面动效的间隔 利用样式class类的显示与隐藏来控制isShowAnimation.value = true;setTimeout(() => {isShowAnimation.value = false;}, 1000); // 1秒后暂停动画}
onMounted(() => {setInterval(triggerAnimation, 150000); // 这里设置了15秒后 才动效一次
})
//注：记得离开页面时销毁定时器哦HTML页面
<div :class="{'scroll-animation': isShowAnimation}"> 合格率 </div>
4、补充：
若你页面动效间隔比较短的话，我们可以直接用CSS样式实现，就更简单了，如：
.scroll-animation {animation: scroll 2s forwards infinite; // infinite是无限循环 默认是1 表示只动态1次
}
@keyframes scroll { // 动效的效果设置from {opacity: 0;transform: translateY(100%);}to {opacity: 1;transform: translateY(0);}
}
5、Animation属性说明：
- animation-name: 指定要绑定到元素的关键帧名称。这是必需的。
- animation-duration: 指定动画完成一个周期所需的时间，默认值是 0s。
- animation-timing-function: 指定动画速度变化的函数，默认值是 ease。
- animation-delay: 指定动画开始前的延迟时间，默认值是 0s。
- animation-iteration-count: 指定动画应该播放的次数，默认值是 1。可以使用 infinite 表示无限次循环。
- animation-direction: 指定动画播放的方向，默认值是 normal。其他值包括 reverse、alternate 和 alternate-reverse。
- animation-fill-mode: 指定动画在开始之前和结束之后应用于元素的样式，默认值是 none。其他值包括 forwards、backwards 和 both。
- animation-play-state: 指定动画的播放状态，默认值是 running。其他值包括 paused。