animate.css+wow.js实现网页动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>animate动画</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">

</head>
<style>
    .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 200px;
        flex-wrap: wrap;
        width: 1200px;
        margin: auto;
    }

    .wrap div {
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: lightseagreen;
        margin: 50px;
    }

    .btn {
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: lightseagreen;
        color: #fff;
        cursor: pointer;
        animation-duration: 2s;
        animation-delay: 300ms;
        animation-iteration-count: infinite;
        animation-name: pulse;
    }
</style>

<body>
    <div class="btn">点击动画</div>
    <div class="wrap">
        <div id="one" class="wow bounceInDown"></div>
        <div class="wow zoomInDown"></div>
        <div class="wow flipInY"></div>
        <div class="wow pulse"></div>
        <div class="wow rubberBand"></div>
        <div class="wow shake"></div>
        <div class="wow swing"></div>
        <div class="wow tada"></div>
        <div class="wow wobble"></div>
        <div class="wow jello"></div>
        <div class="wow heartBeat"></div>
        <div class="wow bounceInRight"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/wow/0.1.11/wow.min.js"></script>
<script>
    $(function () {
        // 初始化wow
        new WOW().init();
        $.fn.extend({
            animateCss: function (animationName) {
                var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                $(this).addClass('animated ' + animationName).one(animationEnd, function () {
                    $(this).removeClass('animated ' + animationName);
                });
            }
        });
        $('.btn').on('click', function () {
            $('.wrap').animateCss('bounceInUp');
        });
    });
</script>

</html>