背景过渡无法正常工作

Question

我将在 setInterval 函数中更改背景元素。背景马上就变了，但我想让它在几秒钟内变好。

var act = true;
setInterval(function(){
  if (act) {
    $("div").addClass("back2")
    $("div").removeClass("back")
    act = false
  } else {
    $("div").addClass("back")
    $("div").removeClass("back2")
    act = true
  }
}, 10000)

.back{
  width:100px;
  height:100px;
  background-image:url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  display:block;
  transition: .5s ;
}

.back2{
  width:100px;
  height:100px;
  
  background-image:url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  display:block;
  transition: .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c">tz</div>

Answer 1

background-image 不是动画属性。正如您在 mozilla 开发页面上的列表中看到的那样，这是不可能的：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

你可以做的是让两个 div 和一个背景图像相互重叠，然后将其中一个设为透明以创建混合效果。

我做了一个fiddle来说明这个想法：

https://jsfiddle.net/Lpduw3mq/

// find elements
var firstDiv = $("#first")
var secondDiv = $("#second")

// Swap backgrounds
var act = true;
setInterval(function(){
  if (act) {
    firstDiv.addClass("transparent")
    secondDiv.removeClass("transparent")
    act = false
  } else {
    firstDiv.removeClass("transparent")
    secondDiv.addClass("transparent")
    act = true
  }
}, 5000)

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.base {
  position: absolute;
  top: 0;
  left: 0;
}

.back {
  width: 100px;
  height: 100px;
  background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.back2 {
  width: 100px;
  height: 100px;
  background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.transparent {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" class="base back"></div>
<div id="second" class="base back2 transparent"></div>

Answer 2

您可以使用绝对样式与图像背景相同的两个项目的无序列表，并使用关键帧动画在这两个项目之间切换，同时平滑地更改背景不透明度。看看这个 http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

背景过渡无法正常工作

Background transition does not work properly

html

javascript

css

jquery

css-transitions