title: CSS3 <body> background-color change linear infinite animation
body: <p>I need to change the background color of my page in a loop. So I have something like this:</p>
  
  <pre><code>.bg-changer {
      animation: bg-img-slider 10s linear infinite;
      transition: background 300ms ease-in 200ms;
  </code></pre>
  
  <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>body {
    margin: 15px auto;
    height: 95vh;
    width: 90%;
    border: 1px solid silver;
  }
  .bg-changer {
    animation: bg-img-slider 10s linear infinite;
    /*transition: background 300ms ease-in 200ms;*/
    transition-timing-function: ease-in-out;
    transition-duration: 1s;
  }
  @keyframes bg-img-slider {
    0%, 100% {
      background-image: radial-gradient(silver, snow);
    }
    20% {
      background-image: radial-gradient(#2b5876, #4e4376);
    }
    40% {
      background-image: radial-gradient(#44A08D, #093637);
    }
    60% {
      background-image: radial-gradient(#DD5E89, #F7BB97);
    }
    80% {
      background-image: radial-gradient(#348F50, #56B4D3);
    }
    90% {
      background-image: radial-gradient(#bdc3c7, #2c3e50);
    }
  }
  .page-header {
    padding: 10px 0 5px 15px;
  }
  .page-header&gt;h1 {
    padding-bottom: 5px;
    border-bottom: 1px solid gray;
  }
  .page-header&gt;p {
    font-size: 85%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;BG&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body class="bg-changer"&gt;
    &lt;div class="main-content "&gt;
      &lt;div class="page-header"&gt;
        &lt;h1&gt;Page Title&lt;/h1&gt;
        &lt;p&gt;This is the tag line&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>}
  
  @keyframes bg-img-slider {
      0%,
      100% {
          background-image: radial-gradient(silver, snow);
      }
      20% {
          background-image: radial-gradient(#2b5876, #4e4376);
          /*animation-timing-function: ease-in;*/
      }
      40% {
          background-image: radial-gradient(#44A08D, #093637);
      }
      60% {
          background-image: radial-gradient(#DD5E89, #F7BB97);
          /*animation-timing-function: ease-in;*/
      }
      80% {
          background-image: radial-gradient(#348F50, #56B4D3);
      }
      90% {
          background-image: radial-gradient(#bdc3c7, #2c3e50);
          /*animation-timing-function: ease-in;*/
      }
  }
  </code></pre>
  
  <p>I apply the class <code>bg-changer</code> to the <code>body</code> tag. It works but the color change happens like a slap. I tried several things to make it smoother. I tried the <code>transition</code>, <code>animation-timing-fuction</code> and a few others (also placed them in the keyframes). Nothing seems to work!</p>
  
  <p>Please educate me with the following questions I have:</p>
  
  <ul>
  <li>First, obviously, how do I change body background color <strong>smoothly</strong> rather than instantly (on every keyframe %).</li>
  <li>Why does <code>background-color</code> not work? I had to use <code>background-image</code>. What is the correct way to use - <code>background</code>, <code>background-color</code>, <code>background-image</code>?</li>
  </ul>
  
  <p>Thanks in advance.</p>