Wie fade Übergang schneller css3 machen?

Question

Ich ändere mein Hintergrundbild alle 7 Sekunden, und ich mache es mit einem Übergangsübergang. Das Problem ist, dass der Übergang zu lange dauert, daher gibt es eine Zeitlücke zwischen jedem Bild, bei dem der Hintergrund vollständig weiß ist. Ich habe versucht, die Eigenschaft transition duration zu ändern, aber es hat keine Auswirkungen.

SCSS

.slide_photo { 
    top:0; 
    left:0; 
    margin: 52px 0 0 0; 
    position: fixed; 
    width: 100%; 
    height: 700px; 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), image-url('landing1.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100% 100%; 
    transition: all 0.5s ease; 
    -webkit-animation: fade 7s infinite; 
    -moz-animation: fade 7s infinite; 
    -o-animation: fade 7s infinite; 
    animation: fade 7s infinite; 
} 


@-webkit-keyframes fade { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@-moz-keyframes fade { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@-o-keyframes fade { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@keyframes fade { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

JAVASCRIPT

var slide_images = ["landing1.jpg", "landing2.jpg", "landing3.jpg", "landing4.jpg"]; 
var slide_count = 0; 


$(document).ready(function() { 

    setInterval(function() { 
    slide_count = ++slide_count % slide_images.length; 

    $('.slide_photo').css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(\'' + slide_images[slide_count] + '\')'); 
    }, 7000); 

}); 

HTML

<div class="container landing-container"> 

Danke fürs Lesen.

Answer 1

Darf ich vorschlagen, fallen Sie Skript und das alles mit Hilfe von CSS, als Skript und CSS kombiniert wird höchstwahrscheinlich bekommen Sie Probleme mit der Synchronisation (natürlich alles tun mit Skript wird auch lösen Synchronisation)

.container { 
 
    position: absolute; 
 
    width: 90%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
.slide_photo { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: 100% 100%; 
 
    animation: fade 28s infinite; 
 
    opacity: 0; 
 
} 
 
.slide_photo.nr4 { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/150/f00'); 
 
    animation-delay: 21s; 
 
} 
 
.slide_photo.nr3 { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/150/'); 
 
    animation-delay: 14s; 
 
} 
 
.slide_photo.nr2 { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/150/00f'); 
 
    animation-delay: 7s; 
 
} 
 
.slide_photo.nr1 { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/150/0f0'); 
 
    animation-delay: 0s; 
 
} 
 

 
@keyframes fade { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    } 
 
    22% { 
 
    opacity: 1; 
 
    } 
 
    40% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="container landing-container"> 
 
    <div class="slide_photo nr1"></div> 
 
    <div class="slide_photo nr2"></div> 
 
    <div class="slide_photo nr3"></div> 
 
    <div class="slide_photo nr4"></div> 
 
</div>

Answer 2

In Ihrem Skript ist die setInverval-Funktion korrekt auf 7000 eingestellt. Die Dauerwerte in Ihrem CSS scheinen jedoch falsch zu sein. Ändern Sie ihn auf etwas wie folgt aus:

.slide_photo { 
    ... 
    -webkit-animation: fade .3s infinite; 
    -moz-animation: fade .3s infinite; 
    -o-animation: fade .3s infinite; 
    animation: fade .3s infinite; 
}