css实现图标闪烁（Element-UI el-badge标记组件为例）

本文以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>