CSS-Hintergrundbild-Animation flimmern

Question

Ich schrieb diese @ Keyframes Animation, um den Hintergrund nach ein paar Sekunden zu ändern.

@keyframes banner{ 
0% {background-image: url(../img/1.jpg);} 
18% {background-image: url(../img/2.jpg);} 
36% {background-image: url(../img/3.jpg);} 
54% {background-image: url(../img/4.jpg);} 
72% {background-image: url(../img/5.jpg);} 
100% {background-image: url(../img/6.jpg);}} 

Ich habe es dann zu meinem Körper hinzugefügt.

background-image: url(../img/1.jpg); 
animation-name: banner; 
animation-duration: 20s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
perspective: 1000; 
background-attachment: fixed; 

Das Problem ist, dass, wenn ein Bild in ein anderes wechselt, obwohl es ein Fade-Effekt, es ist immer noch ein Bruchteil einer Sekunde flimmern, die sich nach dem ersten Lauf der Animation zu gehen scheint.

Answer 1

Die Animation flackert beim ersten Mal, weil jedes Hintergrundbild separat über das Netzwerk abgefragt werden muss. Abhängig davon, wie groß jedes Ihrer Hintergrundbilder ist, empfiehlt es sich, sie zu einem Sprite-Bild zusammenzufassen und dann die Positionsänderung zu animieren. Hier ein Beispiel:

@keyframes banner{ 
0% { background-position: 0% 0%} 
18% {background-position: 0% -100%} 
36% {background-position: 0% -200%} 
54% {background-position: 0% -300%} 
72% {background-position: 0% -400%} 
100% {background-position: 0% -500%}} 

background-image: url(../img/123456-combined.jpg); 
animation-name: banner; 
animation-duration: 20s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
perspective: 1000; 
background-attachment: fixed; 

Die Werte, die ich für die „x“ gesetzt und „y“ lediglich um Ihnen zu zeigen, wie das Bild zu positionieren. Je nachdem, wie Sie das Sprite erstellen, müssen Sie sie jedoch an der Position ändern, an der das Bild zur angegebenen Dauer angezeigt wird.

Wenn dies nicht das ist, was Sie suchen, können Sie immer versuchen, eine Reihe DIVs für jedes Hintergrundbild festzulegen. Lassen Sie jedes DIV mit dem Z-Index über das vorherige einblenden. Dann können Sie das Alpha von jedem animieren, um das darunter liegende zu enthüllen. Da jeder DIV vor dem Prior floaten muss, müssen Sie "position: fixed" verwenden, also kann ich nicht sagen, dass dies die beste Option für mobile ist. Mobile Browser neigen dazu, über feste Elemente zu kotzen.

Answer 2

erste Iteration ist das Problem, also warum Sie nicht einfach die gleiche Animation laufen mit:

animation-duration: 1s; 
animation-iteration-count: 1; 

auf einer anderen Ebene, natürlich versteckt. Anscheinend muss der Layer dieselbe Klasse sein wie der, den Sie verwenden, und kann nicht display: none; sein, also sollten Sie ihn mit z-index Attribut oder width:0; height:0; verstecken. Auf diese Weise werden Sie den ersten Lauf los, ohne dass jemand zusieht.

Answer 3

Wenn die Größe für Sie keine Rolle spielt. sollten Sie versuchen, Data URI

https://css-tricks.com/data-uris/