title: Why CSS background transition is not smooth?
body: <p>I'm trying to animate my header background images but transition is not smooth like I saw in tutorial.
  (Ignore the gradient)</p>
  <pre><code>animation: slide 10s infinite;
  @keyframes slide {
      0% {
          background-image: linear-gradient(
              rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)
              ),url(&quot;imgs/header-1.jpg&quot;);
      }
  
      33% {
          background-image: linear-gradient(
              rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)
              ),url(&quot;imgs/header-2.jpg&quot;);
      }
  
      67% {
          background-image: linear-gradient(
              rgba(0, 0, 0, 0.5),
              rgba(0, 0, 0, 0.5)
              ),url(&quot;imgs/header-3.jpg&quot;);
      }
  }
  </code></pre>