title: How to play multiple animations back-to-back in CSS?
body: <p>I can not play several animations one after the other with a "fluid" 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>#circle {
      border-radius: 50%;
      background: red;
      animation: zoomIn 1s, pulse 0.5s ease 1s;
      height: 100px;
      width: 100px;
  }
  
  @keyframes zoomIn {
      0% {
          transform: scale(0);
      }
      100% {
          transform: scale(1);
      }
    }
  
  @keyframes pulse {
      from {
          transform: scale(1);
      }
      100% {
          transform: scale(1.1);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="circle"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Am I doing something wrong? I want to keep the keyframes separate.</p>