css animation实现音乐震动条

效果如下

实现

核心就是用关键帧keyframe在动画的不同阶段设置不同百分比高度，每个div的keyframe设置为一样，此时所有div的高度变化是一样的，要产生视觉上的差异，只要将每一段完成的时间设为不一样即可，一个先完成一个后完成，因为关键帧是一样的，所以只要设置动画完成的时间挨个逐渐不一样即可。

1.DOM结构

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

则效果如下