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很可能会让您遇到同步问题（当然，使用脚本完成所有操作也会解决同步问题）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在您的脚本中，setInverval函数已正确设置为7000.但CSS中的持续时间值似乎错误。把它改成这样的东西：

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

如何使css3的fade过渡更快？

2 个答案: