title: Change gradient background-color, slow animation
body: <p>I'm trying to change the background color on a section.</p>
  
  <pre><code>&lt;section id="welcome" class="gradientBlue"&gt;
      &lt;div class="mainTitle"&gt;
          &lt;h1&gt;Sdesigns&lt;/h1&gt;
          &lt;h2&gt;Taking web design to the next level&lt;/h2&gt;
          &lt;div class="centerArrow"&gt;
              &lt;i id="0" class="icon-caret-down arrow arrowDown"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The is how it currently looks:
  <img src="https://i.stack.imgur.com/rLbPz.png" alt="Th"></p>
  
  <p>The Idea is when I press the arrow the background changes to another gradient color. I already set this class up. So It should slowly fade-in class "gradientGreen".</p>
  
  <pre><code>.gradientGreen{
      background-color:#39b54a;
      background: -webkit-gradient(radial, center center, 0, center center, 460, from(#8dc63f), to(#205075));/* Safari 4-5, Chrome 1-9 */ 
      background: -webkit-radial-gradient(circle, #8dc63f, #39b54a);/* Safari 5.1+, Chrome 10+ */
      background: -moz-radial-gradient(circle, #8dc63f, #39b54a);/* Firefox 3.6+ */
      background: -ms-radial-gradient(circle, #8dc63f, #39b54a);/* IE 10 */
  }  
  </code></pre>
  
  <p>I already tried this and many more in Jquery but it always changes instant. I hope anyone can help me.</p>
  
  <pre><code>$('.arrowDown').click(function(e) {
      $("#welcome").addClass("gradientGreen");
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/avllw.png" alt="enter image description here"></p>