Edit in JSFiddle

// 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) {
        window.cancelNextAnimationFrame = function (id) {
            if (ids[id]) {
                cancelAnimationFrame(ids[id]);
                delete ids[id];
            }
        };
    }
})();


div = document.createElement('div');
document.body.appendChild(div);

requestNextAnimationFrame(function () {
    div.className = 'fade';
});

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