CSS3 Hintergrundposition Übergang

Question

Ich weiß, dass viele Fragen zu diesem Thema schon gestellt wurden, aber ich finde nicht jemanden, der genau das gleiche Problem hat wie ich.

Zur Info: Ich bin mit FF 53.0.2

So ist es das, was ich erreichen möchte: Ich habe Steigung mit 12 Farben (eine für jeden Monat des Jahres) im Hintergrund und ich verwenden möchte insgesamt Hintergrund-Größe und Hintergrund-Position-Eigenschaften, um einen Effekt zu erzeugen, bei dem der Hintergrund sich ändern würde, wenn er ausgelöst wird (Anwendung ändert eine Klasse am Körper).

Das Problem ist, dass, wenn ich die background-position:0 500%; zu background-position:0 600%; zu background-position:0 600%; ändern scheint der Übergang von background-position:0 0; der gesamte Hintergrund Scroll auftreten, bis 600% erreicht ist, was überhaupt keinen Sinn macht.

Gibt es eine Möglichkeit, dies zu ändern, um den Fehler in der Hintergrundposition zu verhindern?

Es ist ein Ausschnitt Ihnen zu helfen, zu verstehen:

var month = 1; 
 
setInterval(function(){ 
 
    month++; 
 
    if(month > 12){ month = 1; } 
 
    $('#wrapper').attr('class', '').addClass('month-'+month); 
 
}, 2500);

.box{ 
 
    position:relative;display:block; 
 
    width:100%;height:450px; 
 
    
 
    background: #9c54dc; 
 
\t 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%); 
 
\t 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%); 
 
\t 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%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c54dc', endColorstr='#b233fc',GradientType=0); 
 

 
\t -webkit-background-size:100% 1200%; 
 
\t -moz-background-size:100% 1200%; 
 
\t -o-background-size:100% 1200%; 
 
\t background-size:100% 1200%; 
 

 
\t background-position:0% 0%; 
 
    
 
    -webkit-transition:background-position 2s ease; 
 
\t -moz-transition:background-position 2s ease; 
 
\t -o-transition:background-position 2s ease; 
 
\t transition:background-position 2s ease; 
 
} 
 

 
#wrapper.month-1 .box{ 
 
\t background-position:0 0; 
 
} 
 

 
#wrapper.month-2 .box{ 
 
\t background-position:0 100%; 
 
} 
 

 
#wrapper.month-3 .box{ 
 
\t background-position:0 200%; 
 
} 
 

 
#wrapper.month-4 .box{ 
 
\t background-position:0 300%; 
 
} 
 

 
#wrapper.month-5 .box{ 
 
\t background-position:0 400%; 
 
} 
 

 
#wrapper.month-6 .box{ 
 
\t background-position:0 500%; 
 
} 
 

 
#wrapper.month-7 .box{ 
 
\t background-position:0 600%; 
 
} 
 

 
#wrapper.month-8 .box{ 
 
\t background-position:0 700%; 
 
} 
 

 
#wrapper.month-9 .box{ 
 
\t background-position:0 800%; 
 
} 
 

 
#wrapper.month-10 .box{ 
 
\t background-position:0 900%; 
 
} 
 

 
#wrapper.month-11 .box{ 
 
\t background-position:0 1000%; 
 
} 
 

 
#wrapper.month-12 .box{ 
 
\t background-position:0 1100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper" class="month-1"> 
 
    <div class="box"></div> 
 
</div>

Answer 1

Die Hintergrund-Position in der ganzen Größe des Hintergrunds relativ ist.

Also, da Sie 12 Monate haben, nimmt jeden Monat 1/12 des gesamten

var month = 1; 
 
setInterval(function(){ 
 
    month++; 
 
    if(month > 12){ month = 1; } 
 
    $('#wrapper').attr('class', '').addClass('month-'+month); 
 
}, 2500);

.box{ 
 
    position:relative;display:block; 
 
    width:100%;height:450px; 
 
    
 
    background: #9c54dc; 
 
\t 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%); 
 
\t 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%); 
 
\t 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%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c54dc', endColorstr='#b233fc',GradientType=0); 
 

 
\t -webkit-background-size:100% 1200%; 
 
\t -moz-background-size:100% 1200%; 
 
\t -o-background-size:100% 1200%; 
 
\t background-size:100% 1200%; 
 

 
\t background-position:0% 0%; 
 
    
 
    -webkit-transition:background-position 2s ease; 
 
\t -moz-transition:background-position 2s ease; 
 
\t -o-transition:background-position 2s ease; 
 
\t transition:background-position 2s ease; 
 
} 
 

 
#wrapper.month-1 .box{ 
 
\t background-position:0 0; 
 
} 
 

 
#wrapper.month-2 .box{ 
 
\t background-position:0 8.3%; /* new value */ 
 
} 
 

 
#wrapper.month-3 .box{ 
 
\t background-position:0 16.6%; /* new value */ 
 
} 
 

 
#wrapper.month-4 .box{ 
 
\t background-position:0 25%; /* new value */ 
 
} 
 

 
#wrapper.month-5 .box{ 
 
\t background-position:0 33.3%; 
 
} 
 

 
#wrapper.month-6 .box{ 
 
\t background-position:0 41.6%; 
 
} 
 

 
#wrapper.month-7 .box{ 
 
\t background-position:0 50%; 
 
} 
 

 
#wrapper.month-8 .box{ 
 
\t background-position:0 58.3%; 
 
} 
 

 
#wrapper.month-9 .box{ 
 
\t background-position:0 66.7%; 
 
} 
 

 
#wrapper.month-10 .box{ 
 
\t background-position:0 75%; 
 
} 
 

 
#wrapper.month-11 .box{ 
 
\t background-position:0 83.3%; 
 
} 
 

 
#wrapper.month-12 .box{ 
 
\t background-position:0 91.6%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper" class="month-1"> 
 
    <div class="box"></div> 
 
</div>