JSFiddle - React, Tailwind, and code Playground

by Felipe Kautzmann

CSS

div {
    background-color: black;
    display: block;
    height:100px;
    width:100px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
div.fade {
    opacity: 1;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }

    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }
})();

// requestNextAnimationFrame from: https://gist.github.com/getify/3004342
(function () {
    var ids = {};

    function requestId() {
        var id;
        do {
            id = Math.floor(Math.random() * 1E9);
        } while (id in ids);
        return id;
    }

    if (!window.requestNextAnimationFrame) {
        window.requestNextAnimationFrame = function (callback, element) {
            var id = requestId();

            ids[id] = requestAnimationFrame(function () {
                ids[id] = requestAnimationFrame(function (ts) {
                    delete ids[id];
                    callback(ts);
                }, element);
            }, element);

            return id;
        };
    }

    if (!window.cancelNextAnimationFrame)...