JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img_cont animated">
  <img id="img_img" src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg" />
</div>

CSS

.img_cont{
  height: 200px; 
  width: 200px;
}

.img_cont img{
  max-width: 100%;
  border-radius: 15px;
	display: inline-block;
  position: relative;
  top: 1%;
  transform: translateY(-1%);
  -moz-transform: translateY(-1%);
  -o-transform: translateY(-1%);
  -webkit-transform: translateY(-1%);
}

@keyframes rollIn {
  from {
    opacity: 0.1;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rollIn {
  animation-name: rollIn;
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.1;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  animation-name: rollOut;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

JavaScript

$(document).ready(function(){
	$('.img_cont').addClass('rollIn');
  
  setTimeout(function(){
  	$('.img_cont').removeClass('rollIn').addClass('rollOut');
  }, 3000);
  
  setTimeout(function(){
  	$('#img_img').attr('src', 'http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg');
  }, 6000);
  
  setTimeout(function(){  	
  	$('.img_cont').removeClass('rollOut').addClass('rollIn');
  }, 9000);
});