vue 图标的动画效果，类似于呼吸灯效果的缩放动画

效果描述：

1. 有未读消息，显示红点，并且图标显示缩放的动画效果；

2. 没有未读消息，则不显示红点，移除动画效果

当showDot=true时，显示红点和动画效果

调用：

<img src="./../assets/icon_tasks.png" v-if="showDot" class="rightTask taskAnimation"  @click="jumpTasks">
      <img src="./../assets/icon_tasks.png" v-if="!showDot" class="rightTask"  @click="jumpTasks">
      <img src="" class="point" v-show="showDot" />

红点：

.point {
  position: absolute;
  right: 0;
  margin-right: 15px;
  width: 10px;
  height: 10px;
  border: 1px solid #FFFFFF;
  background: #EC2854;
  border-radius: 9px;
}

动画效果：

.taskAnimation {
  animation: breath infinite 2s ease;
}


@keyframes breath{
  0%{
    transform: scale(0.6);
  }
  50%