css animation實現音樂震動條

效果以下

實現

核心就是用關鍵幀keyframe在動畫的不一樣階段設置不一樣百分比高度，每一個div的keyframe設置爲同樣，此時全部div的高度變化是同樣的，要產生視覺上的差別，只要將每一段完成的時間設爲不同便可，一個先完成一個後完成，由於關鍵幀是同樣的，因此只要設置動畫完成的時間挨個逐漸不同便可。

1.DOM結構

<div class="content">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" id="last"></div>
    </div>

2.CSS樣式

* {
      margin: 0;
      padding: 0;
    }
    .content {
      width: 100px;
      height: 80px;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%) rotateX(180deg);
    }
    .content .item {
      width:15px;
      height: 80px;
      float: left;
      background-color: #09f;
      margin-right: 2px;
    }
    #last{
      margin-right: 0;
    }

此時效果以下：

3.爲每一個div添加動畫

.item {
      animation: wave 0.8s linear infinite alternate;
    }
    @keyframes wave {
      10% {
        height: 20%;
      }
      20%{
        height: 60%;
      }
      40%{
        height: 40%;
      }
      50%{
        height: 100%;
      }
      100%{
        height: 50%;
      }
    }

此時所有的item都是同樣動的

4.讓每一個item之間產生差別

每個item的動畫都在重複且相同，由於動畫完成相同是同樣的。拿第一個和第二個舉例子，若是要讓他們產生前後，那麼完成10%幀變化所需時間不一樣給，則高度達到20%的進度就不一樣，差別就顯現了。要讓完成10%幀變化所需時間不一樣，只要給他們的完成整個動畫的時間不一樣便可，那麼以後就永遠不一樣。上述代碼

.item {
      animation: wave 0.8s linear infinite alternate;
    }

改成

.item:nth-child(1) {
      animation: wave 0.8s linear infinite alternate;
    }
    .item:nth-child(2) {
      animation: wave 0.9s linear infinite alternate;
    }
    .item:nth-child(3) {
      animation: wave 1s linear infinite alternate;
    }
    .item:nth-child(4) {
      animation: wave 0.8s linear infinite alternate;
    }
    .item:nth-child(5) {
      animation: wave 0.7s linear infinite alternate;
    }
    .item:nth-child(6) {
      animation: wave 0.8s linear infinite alternate;
    }

則效果以下