css animation @keyframes 动画

需求：语音播放动态效果

 

方案：使用如下图片，利用 css animation @keyframes  做动画

 

html

<span class="horn" :class="{'active': scope.row.isPlay}"></span>
<audio :id="'audio_'+scope.row.commentId" ref="audio" :src="scope.row.voiceUrl"></audio>

 

 css

.horn{
  width: 25px;
  height: 20px;
  background-image: url('../../../assets/images/voice/icon.png');
  background-size: 100% 100%;
  position: absolute;
  left: 10px;
  top: 50%;
  // margin-top: 50%;
  transform: translateY(-49%);
}
.horn.active{
  animation: fadeInOut 1s infinite;
}
@keyframes fadeInOut {
  0% {
    background-image: url('./assets/images/voice/1.png');
  }
  70% {
    background-image: url('./assets/images/voice/2.png');
  }
  90% {
    background-image: url('./../assets/images/voice/icon.png');
  }
}