如何使css3更快地淡入淡出？ [英] How to make fade transition faster css3?

问题描述

我每7秒更换一次背景图片，而我正在做一个淡入淡出的过渡。问题在于转换时间太长，所以每张图像之间的背景完全是白色的时间间隔。

SCSS

.slide_photo {
top：0;
剩下：0;
margin：52px 0 0 0;
位置：固定;
宽度：100％;
height：700px;
background-image：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），image-url（'landing1.jpg'）;
背景重复：不重复;
background-position：center center;
背景大小：100％100％;
过渡：所有0.5s缓解;
-webkit-animation：淡入淡出7s无限;
-moz-animation：fade 7s infinite;
-o-animation：淡入7s无限;
动画：淡入淡出7s无限;
}


@ -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; 
 
 $ b $（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> 
  

感谢您阅读。

解决方案

我可以建议你放弃脚本，并使用CSS完成所有工作，因为组合脚本和CSS很可能会让你遇到同步问题（当然，用脚本也可以解决同步问题） p>

.container {position：absolute;宽度：90％; height：300px; overflow：hidden;}。slide_photo {position：absolute; top：0;左：0;宽度：100％;身高：100％;背景重复：不重复; background-position：center center;背景大小：100％100％;动画：淡入28s无限; opgity：0;} slide_photo.nr4 {background-image：linear-gradient（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http：// placehold。它/ 150 / F00' ）; （rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http：//（））;}} slide_photo.nr3 {background-image：linear-gradient placehold.it/150/'）;线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http：// placehold.it/150/00f'）;线性梯度（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％{不透明度：1; } 22％{不透明度：1; } 40％{不透明度：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>  

b

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.

解决方案

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>

这篇关于如何使css3更快地淡入淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！