css音阶波浪动画图，线性渐变色

html

<div class="loader-inner line-scale-pulse-out-rapid success">
          <div></div>
          <div></div>
          <div></div>
        </div>

css

/*动态分析图标*/
.line-scale-pulse-out-rapid.success > div {
  background-image: -webkit-linear-gradient(top, rgb(201, 115, 255), rgb(20, 11, 255));
}
.line-scale-pulse-out-rapid>div{
  width:3px;
  height:20px;
  margin-right: 0;
  display:inline-block;
  /*border-radius:2px;*/
  /*margin-right:2px;*/
  vertical-align:middle;
  -webkit-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);
  animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)
}
.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){
  -webkit-animation-delay:-.25s!important;
  animation-delay:-.25s!important
}
.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){
  -webkit-animation-delay:0s!important;
  animation-delay:0s!important
}
@-webkit-keyframes line-scale-pulse-out-rapid{
  0%,90%{
    -webkit-transform:scaley(1);
    transform:scaley(1)
  }
  80%{
    -webkit-transform:scaley(.3);
    transform:scaley(.3)
  }
}
@keyframes line-scale-pulse-out-rapid{
  0%,90%{
    -webkit-transform:scaley(1);
    transform:scaley(1)
  }
  80%{-webkit-transform:scaley(.3);
    transform:scaley(.3)
  }
}