fullpage使用js增加动画

    jQuery(document).ready(function ($) {
        $('.fullpager').fullpage({
            //实例化完执行的回调函数
            afterRender: function () {
                $(".fullpage:first-child").find(".animated").each(function () {
                    add($(this));
                });
            },
            //滚动前的回调函数
            onLeave: function (index, nextIndex) {
                $(".fullpage" + index).find(".animated").each(function () {
                    reduce($(this));
                });
                $(".fullpage" + nextIndex).find(".animated").each(function () {
                    add($(this));
                });
            }
        });

        //获取有animated类的data属性值，并增加对应的样式
        function add(ele) {
            var name = ele.data("animated-name"), time = ele.data("animated-time"),
                    delay_time = ele.data("animated-delay-time"), style = ele.attr("style");
            if (style !== "undefined") {
                ele.data("original", style);
            }
            ele.css({
                "-webkit-animation-name": name,
                "animation-name": name,
                "-webkit-animation-duration": time,
                "animation-duration": time,
                "-webkit-animation-delay": delay_time,
                "animation-delay": delay_time
            })
        }

        //移除增加的样式
        function reduce(ele) {
            var original = ele.data("original");
            ele.removeAttr("style", "animation-name");
            if (original !== null) {
                ele.attr("style", original);
            }
        }
    });

 <div class="fullpage1 section">

                        <div class="circles">
                            <div class="circle-1 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="1s"></div>
                            <div class="circle-2 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="1.5s"></div>
                            <div class="circle-3 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="1.8s"></div>
                            <div class="circle-4 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="2s"></div>
                        </div>
                        <div class="tree animated" data-animated-name="fadeInUp" data-animated-time="1s"
                             data-animated-delay-time="2.4s"></div>
    </div>