フェードトランジションを高速化する方法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を使用してそれをすべて行うことができます`20％、80％{ 不透明度：また範囲を増加させることができる同期）

.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関数は7000に正しく設定されていますが、CSSの継続時間の値が正しくないようです。このようなものに変更します：組み合わせスクリプトとCSSが最も可能性が高いだろう、もちろん（あなたの同期の問題を取得するスクリプトを使用してそれをすべて行いますよう

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