JSFiddle - React, Tailwind, and code Playground

HTML

<div id="preload">
    <div class="fase_1 fase">
        <img src="http://www.matcha.provisorio.ws/images/fase_1.png" alt="Fase1" />
    </div>
    <div class="fase_2 fase">
        <img src="http://www.matcha.provisorio.ws/images/fase_2.png" alt="Fase1" />
    </div>
    <div class="fase_3 fase">
        <img src="http://www.matcha.provisorio.ws/images/fase_3.png" alt="Fase1" />
    </div>
</div>

CSS

#preload {
    position:fixed;
    width:100%;
    height:100%;
    z-index:50;
    overflow:hidden;
}
#preload div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    transform: scale(0);
}
#preload div img {
    height:100%;
    width:100%;
}
#preload {
    background-color: #2F2727;
    background-image: url(../images/bg_verde.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#236a0f), to(#133e08));
    background: -webkit-radial-gradient(circle, #236a0f, #133e08);
    background: -moz-radial-gradient(circle, #236a0f, #133e08);
    background: -ms-radial-gradient(circle, #236a0f, #133e08);
}
/*
Ajustei este cĂłdigo com base no exemplo neste link
http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design
*/
 .fase {
    display: block;
    position: absolute;
    background: transparent;
    /*border-radius: 100%;*/
}
/*animation effect*/
 .fase.animate {
    animation: tinta 0.65s ease-in-out;
}
@keyframes tinta {
    from {
        transform: scale(0);
    }
    , to {
        opacity: 1;
        transform: scale(1);
        display:block
    }
}

JavaScript

$(document).ready(function () {
    //executa o primeiro logo de cara 
    radial('.fase_1');
    //coloca os demais no delay
    $('.fase_2').css({
        transform: 'scale(0)'
    });
    $(window).delay(300).queue(function (next) {
        radial('.fase_2');
        next();
    });
    $(window).delay(800).queue(function (next) {
        radial('.fase_3');
    });
});

//aplica a classe que vai animar utilizando apenas CSS
function radial(element) {
    var el = $(element);
    //inclui a classe para dar start na animacao
    el.addClass("animate");
    //mantem o elemento na tela
    el.css({
        transform: 'scale(1)'
    });
}