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;
    }

则效果以下