Fade Radial js or canvas

Question

Hello, I wonder if there is some transition I can do in radial or style of dissolving paint (as if it were running paint)? For this purpose become cooler to open the site.

Fiddle: http://jsfiddle.net/xos841uf/

$(document).ready(function () {
    
        $('.fase_1').fadeIn(200);
        $('.fase_2').delay(300).fadeIn(200);
        $('.fase_3').delay(800).fadeIn(200);
    
})

#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:none;}
#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);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="preload">
        <div class="fase_1">
            <img src="http://www.matcha.provisorio.ws/images/fase_1.png" alt="Fase1" />
        </div>
        <div class="fase_2">
            <img src="http://www.matcha.provisorio.ws/images/fase_2.png" alt="Fase1" />
        </div>
        <div class="fase_3">
            <img src="http://www.matcha.provisorio.ws/images/fase_3.png" alt="Fase1" />
        </div>
    </div>

Answer 1

Hello,

made an example (actually updated your example)

Code with example animation

... where I used pure CSS animation.

It is necessary to set the positions and delays to achieve a better effect. It is still possible to reverse the direction of the animation by changing this CSS snippet.

@keyframes tinta {
    from {
        transform: scale(0);
    }
    , to {
        opacity: 1;
        transform: scale(1);
        display:block
    }
}

Inverting the values of the Transform property : Scale(x);

I hope it helped.