title: Simple CSS keyframe animation not working
body: <p>I am making a simple example of CSS animation but it does not run. Pl help someone! </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-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  
  .dot{
      background: #e74c3c;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      font-size: 10px;
      animation: pulse 1s infinite;
  
  }
  
  @keyframes  pulse{
   0% {box-shadow: 0 0 0 0em #c0392b;}
   25% {box-shadow: 0 0 0 0.25em #c0392b;}
   50% {box-shadow: 0 0 0 0.5em #c0392b;}
   75% {box-shadow: 0 0 0 0.25em #c0392b;}
   100% {box-shadow: 0 0 0 0.15em #c0392b;}
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>