title: Changing a css linear gradient animation without freezing the animation
body: <p>I have an linear gradient animation for my website and I would like themes, so I am trying to use javascript to change the color's in the css,
  I got it to do something but it freezes the animation when I do so.</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-js lang-js prettyprint-override"><code>function changeBackground() {
     document.body.style.background = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   width: 100wh;
   height: 90vh;
   color: #fff;
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
   background-size: 400% 400%;
   -webkit-animation: Gradient 15s ease infinite;
   -moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
      }
  
      @-webkit-keyframes Gradient {
   0% {
    background-position: 0% 50%
   }
   50% {
    background-position: 100% 50%
   }
   100% {
    background-position: 0% 50%
   }
      }
  
      @-moz-keyframes Gradient {
       0% {
    background-position: 0% 50%
   }
   50% {
    background-position: 100% 50%
   }
   100% {
    background-position: 0% 50%
   }
      }
  
      @keyframes Gradient {
   0% {
    background-position: 0% 50%
   }
   50% {
    background-position: 100% 50%
   }
   100% {
    background-position: 0% 50%
   }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;a onclick="changeBackground()"&gt;Default&lt;/a&gt;
    &lt;a onclick="clickHandler()"&gt;Fire&lt;/a&gt; // This will be implemented at a later time.</code></pre>
  </div>
  </div>
  </p>