JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="image1"></div>
  <div class="image2" id="image_resize"></div>
</div>

CSS

.container {
  position: relative;
  width: 300px;
  height:200px;
}

.image1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://images.freeimages.com/images/previews/cf6/bird-1394216.jpg);
  background-repeat: no-repeat;
}

.image2 {
  position: absolute;
  height: 100%;
  background-image: url(http://images.freeimages.com/images/previews/4f3/apple-1322812.jpg);
  background-repeat: no-repeat;
}

JavaScript

var percent = 0;
var myInterval = window.setInterval(function() {
	var img = document.getElementById('image_resize');
  img.style.width = percent+"%";
  percent ++;
  if(percent > 100) {
  	clearInterval(myInterval);
  }
}, 50);