JSFiddle - React, Tailwind, and code Playground

HTML

<img class="animate" src="http://placehold.it/350x150" id="imgRand">

CSS

img {
    -webkit-transition-duration: 1s;    
}

JavaScript

var fade = function(opacity, fn) {
    this.addEventListener("webkitTransitionEnd", function end() {
        this.removeEventListener("webkitTransitionEnd", end);
        fn && fn.call(this);
    }, false);
    this.style.opacity = opacity;
};

var load = function(src, fn) {
    var self = this, $img = new Image();
    $img.onload = function() {
        fn && fn.call(self);
        $img = null;
    };
    $img.src = src;
};

var $img = document.getElementById("imgRand");
fade.call($img, 0, function() {
    var height = Math.ceil(Math.random() * 100) + 100;
    var width = Math.ceil(Math.random() * 200) + 100;
    var src = "http://placehold.it/" + width + "x" + height;
    load.call(this, src, function() {
        $img.setAttribute("src", src);
        fade.call($img, 1);
    });
});