css animation @keyframes 动画

需求：语音播放动态效果

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

html

 

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');

  }

}