JSFiddle - React, Tailwind, and code Playground

by Kike

HTML

<img class='alignleft' src='http://tympanus.net/Development/GridLoadingEffects/images/2.jpg'/>
<br />
<img class='alignleft' src='http://tympanus.net/Development/GridLoadingEffects/images/13.png'/>

CSS

img.alignleft{
    -webkit-animation: sizeEffect .6s;
       -moz-animation: sizeEffect .6s;
         -o-animation: sizeEffect .6s;
            animation: sizeEffect .6s;
}

@-webkit-keyframes sizeEffect{
    0%{
        opacity: .1;
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
    }
    50%{
        opacity: .8;
        -webkit-transform: scale(1.04);
            -ms-transform: scale(1.04);
                transform: scale(1.04);
    }
    100%{
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }
}

@-moz-keyframes sizeEffect{
    0%{
        opacity: .1;
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
    }
    50%{
        opacity: .8;
        -webkit-transform: scale(1.04);
            -ms-transform: scale(1.04);
                transform: scale(1.04);
    }
    100%{
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }
}

@-o-keyframes sizeEffect{
    0%{
        opacity: .1;
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
    }
    50%{
        opacity: .8;
        -webkit-transform: scale(1.04);
            -ms-transform: scale(1.04);
                transform: scale(1.04);
    }
    100%{
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes sizeEffect{
    0%{
        opacity: .1;
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
    }
    50%{
        opacity: .8;
        -webkit-transform: scale(1.04);
            -ms-transform: scale(1.04);
                transform: scale(1.04);
    }
    100%{
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
               ...