CODEWITHSUNDEEP
javascripthtmljquerycsscss-transitions
Super Hornet
Super Hornet

Reputation: 2907

Background transition does not work properly

I'm going to change back ground an element in a setInterval function. the background is getting changed imediately, but I would like to make it transited in couple of seconds.

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>

Upvotes: 0

Views: 117

Answers (2)

C.Nzau
C.Nzau

Reputation: 1

You can use an unordered list of two items absolutely styled with the image backgrounds and use keyframe animation to change between these two items while smoothly changing a background opacity. Check this out http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

Upvotes: 0

Johannes Klau&#223;
Johannes Klau&#223;

Reputation: 11020

background-image is not an animatable property. As you can see in this list on the mozilla dev page, this is not possible: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

What you can do is have two divs with one background image each overlapping each other and then make one of them transparent to create a blending effect.

I made a fiddle to illustrate the idea:

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>

Upvotes: 1

Related Questions