如何使淡入淡出過渡更快的css3？

Question

我每7秒鍾更改一次背景圖片，並使用淡入淡出過渡效果。 問題是過渡時間太長，因此背景完全為白色的每個圖像之間都存在時間間隔。 我嘗試更改過渡持續時間屬性，但沒有任何效果。

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

謝謝閱讀。

Answer 1

我可以建議您刪除腳本並全部使用CSS來完成，因為將腳本和CSS結合使用很可能會給您帶來同步方面的問題（當然，全部使用腳本也可以解決同步問題）

 .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

在腳本中， setInverval函數正確設置為setInverval但是CSS中的持續時間值似乎是錯誤的。 將其更改為如下所示：

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