title: CSS animation not smooth with radial-gradient background
body: <p>I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code:</p>
  
  <pre><code>background: radial-gradient(black, black, transparent, transparent);
  </code></pre>
  
  <p>Using my code below works well to animate the background-color. However, as soon as I replace the background-color with this radial-gradient background the animation jumps and is no longer smooth. The behavior is consistent over multiple Browsers. This is a minimal working example of the issue I am having:</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>.global {
    background: lightskyblue;
  }
  
  .silver {
    // background: radial-gradient(black, black, transparent, transparent);
    animation: pulse 3s infinite;
  }
  
  @keyframes pulse {
    0%,
    100% {
      // background-color: black;
      background: radial-gradient(black, transparent, transparent, transparent);
    }
    50% {
      // background-color: white;
      background: radial-gradient(black, black, transparent, transparent);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="global"&gt;
    &lt;img src="pngwave.png" alt="test" class="silver" /&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have found this <a href="https://stackoverflow.com/questions/57218443/how-to-animate-a-radial-gradient-using-css">Stackoverflow</a> question which is similar but did not help me solve my problem.</p>