html响应两个不同的图像

Question

如您所见，当一个图像完成动画时，第二个图像出现在它上面。

如何调整两个不同尺寸图像的相同部分以便以相同的速率响应？

$(document).ready(function() {
  setTimeout(function() {
    $('#animate-img2').addClass('hide');
    $('#animate-img').css('display', 'inline');
    $('#animate-img').addClass('fadeIn');
  }, 1000);
});

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

#animate-img {
  display: none;
  z-index: 2;
}

#animate-img2 {
  z-index: 2;
  width: 30%;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:absolute;">
  <div style="position:relative;"><img id="animate-img2" class="fadeIn" src="https://s5.postimg.org/6tl50t2r7/image.png"></div>
</div>
<div style="position:absolute;">
  <div style="position:relative;"><img id="animate-img" src="https://s5.postimg.org/7j3xd6b0j/image.png"></div>
</div>

https://jsfiddle.net/84e7vL9n/8/