用CSS3写一个等待效果

思路

先定义一个点的动画，此例子通过背景色从浅黑色到黑色的过渡效果+动画的延迟，模拟了等待的效果。
这里的animation用的是简写，如果想要了解详细的api，建议参考W3C。

CSS样式

.waiting-item {
      display: inline-block;
      background-color: #00000036;
      height: 10px;
      width: 10px;
      border-radius: 5px;
      margin-left: 5px;
      animation: myfirst 3s infinite linear;
      /* Firefox: */
      -moz-animation: myfirst 3s infinite linear;
      /* Safari 和 Chrome: */
      -webkit-animation: myfirst 3s infinite linear;
      /* Opera: */
      -o-animation: myfirst 3s infinite linear;
    }

    .item1 {
      animation-delay: 0s;
    }

    .item2 {
      animation-delay: 0.6s;
    }

    .item3 {
      animation-delay: 1.2s;
    }
    .item4 {
      animation-delay: 1.8s;
    }
    .item5 {
      animation-delay: 2.4s;
    }
    @keyframes myfirst {
      0% {
        background: #00000036;
      }
      50% {
        background: black;
      }
      100% {
        background: #00000036;
      }
    }

    @-moz-keyframes myfirst /* Firefox */ {
      0% {
        background: #00000036;
      }
      50% {
        background: black;
      }
      100% {
        background: #00000036;
      }
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */ {
      0% {
        background: #00000036;
      }
      50% {
        background: black;
      }
      100% {
        background: #00000036;
      }
    }

    @-o-keyframes myfirst /* Opera */ {
      0% {
        background: #00000036;
      }
      50% {
        background: black;
      }
      100% {
        background: #00000036;
      }
    }

HTML

    <ul class="waiting-container">
      <li class="waiting-item item1"></li>
      <li class="waiting-item item2"></li>
      <li class="waiting-item item3"></li>
      <li class="waiting-item item4"></li>
      <li class="waiting-item item5"></li>
    </ul>

实现的效果