JSFiddle - React, Tailwind, and code Playground
HTML
<img id="myimage" src="http://upload.wikimedia.org/wikipedia/en/c/cc/FPO_mark3.jpg"/>
CSS
* {
margin:0;
padding:0;
}
#myimage {
-webkit-transition:all 0s linear 0s;
-moz-transition:all 0s linear 0s;
-o-transition:all 0s linear 0s;
transition:all 0s linear 0s;
-webkit-transform: translate3d(0,0,0); /* Fixes trails in Chrome */
}
JavaScript
var imageID = 0,
ti = document.getElementById("myimage");;
var changeImage = function(t){
// change the opacity of the image to 0, let the css control the animation
ti.style.opacity = "0.0";
ti.style.filter = 'alpha(opacity=00)'; // IE fallback
// after 1 second (the animation), change the image
setTimeout(function(){
//change the image
switch(imageID){
case 0:
ti.src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTM7c8EFwQ_PseqOEblAtm9qXali9kzvBKsmrGDECLYu1HJP3EO";
break;
case 1:
ti.src="https://si0.twimg.com/profile_images/2317326635/3kglmsqti3msjlb1nr60.png";
break;
case 2:
// return to the original image
ti.src="http://upload.wikimedia.org/wikipedia/en/c/cc/FPO_mark3.jpg";
break;
default:
// do nothing
}
if(imageID == 2){
imageID = 0;
} else {
imageID++;
}
// change the opacity of the image to 0, let the css control the animation
ti.style.opacity = "1.0";
ti.style.filter = 'alpha(opacity=100)'; // IE fallback
},1000);
} // close changeimage
//call same function again for x of seconds
window.setInterval(changeImage, 5000);