JSFiddle - React, Tailwind, and code Playground

box animated

by Jennifer Perrin

HTML

<section id="iloveu">
    <div class="box animated" data-time="1000" data-animate="fadeInLeftBig"></div>
    <div class="box animated" data-time="2000" data-animate="fadeInUpBig"></div>
    <div class="box animated" data-time="3000" data-animate="fadeInRightBig"></div>
    <div class="box animated" data-time="4000" data-animate="fadeInDownBig"></div>
</section>

CSS

/* -------- animate.min.css ------------- */
 @charset"UTF-8";
body {
    -webkit-backface-visibility:hidden;
}
.animated {
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
}
.animated.hinge {
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -o-animation-duration:2s;
    animation-duration:2s;
}
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@-moz-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@-o-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
.animated.flash {
    -webkit-animation-name:flash;
    -moz-animation-name:flash;
    -o-animation-name:flash;
    animation-name:flash;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform:translateX(10px);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -moz-transform:translateX(10px);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -o-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -o-transform:translateX(10px);
    }
}
@keyframes shake {
    0%, 100% {
        transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
       ...

JavaScript

;
(function ($) {

    $('.box').each(function () {

        var vtime = $(this).attr('data-time');
        var vanimate = $(this).attr('data-animate');
        var me = $(this);
        me.hide();

        setTimeout(function () {
            $(me).show().addClass(vanimate);
        }, vtime);

    });

})(jQuery);