title: CSS3 Background position transition
body: <p>i know many questions has been asked about this topic already but I don't seem to find someone who has the exact same Issue than me.</p>
  
  <p><strong>FYI : I am using FF 53.0.2</strong></p>
  
  <p>So this is what I want to achieve : I have gradient containing 12 colors (one for each month of the year) in background and I want to use altogether background-size and background-position properties in order to create an effect where the background would change when triggered (application change a class on body).</p>
  
  <p>The problem is that when I change lets say <code>background-position:0 500%;</code> to <code>background-position:0 600%;</code> the transition seems to occur from <code>background-position:0 0;</code> so the whole background scroll until 600% is reached, which makes no sense at all. </p>
  
  <p>is there a way to tweak this to prevent the background-position bug?</p>
  
  <p><strong>There is a snippet to help you understand:</strong></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>var month = 1;
  setInterval(function(){
    month++;
    if(month &gt; 12){ month = 1; }
    $('#wrapper').attr('class', '').addClass('month-'+month);
  }, 2500);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    position:relative;display:block;
    width:100%;height:450px;
    
    background: #9c54dc;
   background: -moz-linear-gradient(top,  #9c54dc 0%, #6d65ff 9%, #517fff 18%, #14a0ff 27%, #1ad1c0 36%, #6adc57 45%, #ffd21a 54%, #ffb41a 63%, #ff591a 72%, #ff1a1a 81%, #ff6666 91%, #b233fc 100%);
   background: -webkit-linear-gradient(top,  #9c54dc 0%,#6d65ff 9%,#517fff 18%,#14a0ff 27%,#1ad1c0 36%,#6adc57 45%,#ffd21a 54%,#ffb41a 63%,#ff591a 72%,#ff1a1a 81%,#ff6666 91%,#b233fc 100%);
   background: linear-gradient(to bottom,  #9c54dc 0%,#6d65ff 9%,#517fff 18%,#14a0ff 27%,#1ad1c0 36%,#6adc57 45%,#ffd21a 54%,#ffb41a 63%,#ff591a 72%,#ff1a1a 81%,#ff6666 91%,#b233fc 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c54dc', endColorstr='#b233fc',GradientType=0 );
  
   -webkit-background-size:100% 1200%;
   -moz-background-size:100% 1200%;
   -o-background-size:100% 1200%;
   background-size:100% 1200%;
  
   background-position:0% 0%;
    
    -webkit-transition:background-position 2s ease;
   -moz-transition:background-position 2s ease;
   -o-transition:background-position 2s ease;
   transition:background-position 2s ease;
  }
  
  #wrapper.month-1 .box{
   background-position:0 0;
  }
  
  #wrapper.month-2 .box{
   background-position:0 100%;
  }
  
  #wrapper.month-3 .box{
   background-position:0 200%;
  }
  
  #wrapper.month-4 .box{
   background-position:0 300%; 
  }
  
  #wrapper.month-5 .box{
   background-position:0 400%;
  }
  
  #wrapper.month-6 .box{
   background-position:0 500%;
  }
  
  #wrapper.month-7 .box{
   background-position:0 600%;
  }
  
  #wrapper.month-8 .box{
   background-position:0 700%;
  }
  
  #wrapper.month-9 .box{
   background-position:0 800%;
  }
  
  #wrapper.month-10 .box{
   background-position:0 900%;
  }
  
  #wrapper.month-11 .box{
   background-position:0 1000%;
  }
  
  #wrapper.month-12 .box{
   background-position:0 1100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper" class="month-1"&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>