Cross-Fade

Cross-Fade between two rect

by phollome

HTML

<div id="green" class="show"></div>
<div id="blue"></div>

CSS

body {
  background: yellow;
}

#green, #blue {
  transition: all 0.5s linear;
  position: absolute;
  top: 20vh;
  left: 20vw;
  width: 60vw;
  height: 60vh;
  opacity: 0;
  visibility: hidden;
}

#green {
  background: lightgreen;
}
#blue {
  background: skyblue;
}
#green.show, #blue.show {
  opacity: 1;
  visibility: visible;
}

JavaScript

(function() {
	const green = document.querySelector('#green');
  const blue = document.querySelector('#blue');
  setTimeout(() => {
  	toggle();
  	setInterval(() => toggle(), 2000);
  }, 1000);
  function toggle() {
  	green.classList.toggle('show');
    blue.classList.toggle('show');
  }
})();