本文以Element-UI el-badge标记组件为例，实现el-badge图标的闪烁，其他html元素也可以使用此方法实现闪烁功能。
实现闪烁功能，主要用到下面3个CSS属性
1、@keyframes
利用 @keyframes 规则来创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
2、opacity
opacity属性用于控制html元素的透明度，结合前面介绍的@keyframes动画属性，在规定时间内变化元素的透明度，比如0秒时透明度是1（即100%，原本的样子），0.5秒的时候透明度是0.4，1秒的时候透明度又变成1，如此循环，得到闪烁的效果。那么如何使我们的动画进行循环播放呢，这里需要介绍下我们用到的第三个CSS属性 animation
3、animation
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name //动画名称
- animation-duration //动画持续时间
- animation-timing-function //动画计时功能
- animation-delay //动画延迟
- animation-iteration-count //动画迭代计数
- animation-direction //动画方向
我们将animation-name绑定到前面设置的@keyframes动画名称上，并且设置animation-duration（动画持续时间）为2s，请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。如何设置animation-iteration-count 为infinite，表示一直执行，如此闪烁的动画就实现了。
附上代码
<template>
<div>
<el-badge :value="number" class="item" :class="number > 0 ? 'flash' : ''" :hidden="number == 0">
<el-button size="small">评论</el-button>
</el-badge>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
number: 0,
}
},
}
</script>
<style scoped>
/*闪烁动画*/
@keyframes twinkle {
from {
opacity: 1.0;
}
50% {
opacity: 0.4;
}
to {
opacity: 1.0;
}
}
.flash /deep/ .el-badge__content {
animation: twinkle 2s;
animation-iteration-count: infinite;
}
</style>