css实现语音播放动画---原创demo

小程序实现代码如下：
/* animationName控制动画播放 */
<view class="animation" bindtap="click">
    <view class="{{open==true?' animationName':''}}"></view>
    <view class="{{open==true?' animationName':''}}"></view>
    <view class="{{open==true?' animationName':''}}"></view>
    <view class="{{open==true?' animationName':''}}"></view>
    <view class="{{open==true?' animationName':''}}"></view>
</view>
/*css部分  */
.animation{/* 父框 */
  width: 100px;
  height:30px;
  border: 1px solid #6DC7F9;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.animation>view:nth-of-type(1){
  width: 3px;
  height: 5px;
  background-color: #0BB8EF;
  animation-delay: .4s;/*动画延迟  */
}
.animation>view:nth-of-type(2){
  width: 3px;
  height:10px;
  background-color: rgb(126, 212, 238);
  animation-delay: .8s;
}
.animation>view:nth-of-type(3){
  width: 4px;
  height: 15px;
  background-color: #0BB8EF;
  animation-delay: .1s;
}
.animation>view:nth-of-type(4){
  width: 3px;
  height: 10px;
  background-color: rgb(126, 212, 238);
  animation-delay: .8s;
}
.animation>view:nth-of-type(5){
  width: 3px;
  height: 5px;
  background-color: #0BB8EF;
  animation-delay: .4s;
}
.animation>view{/* 动画统一属性 */
  margin:0 2rpx;
  border-radius: 7rpx;
  transform: all .5s;
  animation-duration: .7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode:both;
  
}
.animationName{
  animation-name:animName;/*单独类名方便统一控制动画 */

}
@keyframes animName{/* 规则 */
  from{
     transform: scale(0);
  }
  to{
     transform: scale(1);

  }
}
js控制播放
 click(){
    if(this.data.status==true){//单击事件控制
      this.setData({
        open:true,
        status:false
      })
    }else{
      this.setData({
        open:false,
        status:true
      })
    }

效果如下：