animation-delay负值与音频波形loading效果实例页面

展示

代码

• HTML：

  <h4>正延时（注意动画初期）</h4>
  <div class="loading">
      <i></i><i></i><i></i><i></i>
  </div>
  <h4>负延时</h4>
  <div class="loading negative">
      <i></i><i></i><i></i><i></i>
  </div>

• CSS：

  .loading i {
      display: inline-block;
      border-left: 2px solid deepskyblue;
      height: 2px;
      animation: scaleUp 4s linear infinite alternate;
      margin: 0 1px;
  }
  .loading i:nth-child(2) {
      animation-delay: 1s;
  }
  .loading i:nth-child(3) {
      animation-delay: 2s;
  }
  .loading i:nth-child(4) {
      animation-delay: 3s;
  }
  
  .negative i:nth-child(2) {
      animation-delay: -1s;
  }
  .negative i:nth-child(3) {
      animation-delay: -2s;
  }
  .negative i:nth-child(4) {
      animation-delay: -3s;
  }
  
  @keyframes scaleUp {
      to { transform: scaleY(10); }
  }