Javascript 如何使渐变过渡更快css3？

我每7秒改变一次我的背景图像，我用淡入淡出的过渡。问题是过渡时间太长，因此在背景完全为白色的每个图像之间都有一个时间间隔。我尝试更改“过渡持续时间”属性，但没有任何效果

SCSS

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

---

感谢阅读。

在您的脚本中，

setinvval

函数已正确设置为7000。但是CSS中的持续时间值似乎是错误的。将其更改为以下内容：

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

---

我建议您放弃脚本，全部使用CSS，因为脚本和CSS的结合很可能会导致同步问题（当然，全部使用脚本也会解决同步问题）

.container{
位置：绝对位置；
宽度：90%；
高度：300px；
溢出：隐藏；
}
.幻灯片(照片){
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；
身高：100%；
背景重复：无重复；
背景位置：中心；
背景大小：100%100%；
动画：淡入28秒无限；
不透明度：0；
}
.slide_photo.nr4{
背景图像：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http://placehold.it/150/f00');
动画延迟：21秒；
}
.slide_photo.nr3{
背景图像：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http://placehold.it/150/');
动画延迟：14秒；
}
.slide_photo.nr2{
背景图像：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http://placehold.it/150/00f');
动画延迟：7秒；
}
.slide_photo.nr1{
背景图像：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http://placehold.it/150/0f0');
动画延迟：0s；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
5% {
不透明度：1；
}
22% {
不透明度：1；
}
40% {
不透明度：0；
}
}

您可以增加范围：

20%，80%{opacity:1；}

而不是初始的50%

过渡：所有0.1s线性0决定淡入淡出的持续时间。然后计算与淡入淡出时间成比例的值。由于其他javascript代码的原因，有时它可能会很容易上手，但你的淡出总是需要相同的时间。你能告诉我什么与a给出的答案不符，这样我就可以调整并让你接受吗？@LGSon srry我忘了将其标记为正确，我的错误：）css和js上的持续时间必须相等。
<div class="container landing-container">

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