How to make fade transition faster css3?

问题

I'm changing my background image every 7 seconds, and I'm doing it with a fade transition. The problem is that the transition takes too long, so there is a time gap between every image where the background is totally white. I tried changing the transition duration property, but it doesn't have any effect.

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">

Thanks for reading.

回答1:

May I suggest you drop script and do it all using CSS, as combining script and CSS will most likely get you issues with synchronization (of course, do it all with script will also solve synchronization)

.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>

回答2:

In you script, the setInverval function is correctly set to 7000. But the duration values in your CSS seems wrong. Change it to something like this:

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

来源：https://stackoverflow.com/questions/41751986/how-to-make-fade-transition-faster-css3