title: Chain/sequence animation in CSS
body: <p>i want my buttons chronologically - the second button start animating after first button ends and so on ...
  Could somebody help me achieve that effect ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
        padding: 6px;
      display: block;
      width: 50px;
      font-size: 17px;
      margin: 10px auto;
      border: 2px solid;
      text-decoration: none;
      box-shadow: 0 0 0 rgba(204,169,44, 0.4);
      animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255,208,0, 0.2);
        box-shadow: 00 0 0 10px rgba(255,208,0, 0.2);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="btn-100" href="#"&gt;100&lt;/a&gt;
  &lt;a class="btn-500" href="#"&gt;500&lt;/a&gt;
  &lt;a class="btn-1250" href="#"&gt;1250&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>