完成后，如何在无限上制作 jQuery 动画循环？

Question

我有一个 jQuery 动画，我有一只飞猴，它必须从左到右和从右到左旋转，工作正常，但我必须制作猴子循环。现在我已经即兴创作了，我已经将几个 div 组合在一起，在预览 div 完成旋转后旋转。

HTML：

<a href="">
    <div class="container-banner-jquery-disney-relaxare">
        <img src="img/nori.png" class="fundal-animat">
        <div class="personaj">
            <div class="personaj-rotatie1">
                <div class="personaj-rotatie2">
                    <div class="personaj-rotatie3">
                        <div class="personaj-rotatie4">
                            <div class="personaj-rotatie5">
                                <div class="personaj-rotatie6">
                                    <img src="img/personaj.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>

CSS：

    .container-banner-jquery {
        width: 700px;
        height: 470px;
        overflow: hidden;
        background-image: url(img/funal.jpg);
        position: relative;
    }

    .fundal-animat {
        width: 700px;
        height: auto;
        position: relative;
        top: -860px;
        z-index: 997;
    }

    .personaj {
        width: auto;
        z-index: 999;
        left: -65px;
        top: -400px;
        position: absolute;
    }

JS：

    $.fn.animateRotate = function (angle, duration, easing, complete) {
        var args = $.speed(duration, easing, complete);
        var step = args.step;
        return this.each(function (i, e) {
            args.step = function (now) {
                $.style(e, 'transform', 'rotate(' + now + 'deg)');
                if (step) return step.apply(this, arguments);
            };

            $({
                deg: 0
            }).animate({
                deg: angle
            }, args);
        });
    };



    $(function () {
        $(document).ready(function () {
            $(".personaj-rotatie1").animateRotate(20, 2000, "linear", function () {
                $(".personaj-rotatie2").animateRotate(-20, 2000, "linear", function () {
                    $(".personaj-rotatie3").animateRotate(20, 2000, "linear", function () {
                        $(".personaj-rotatie4").animateRotate(-20, 2000, "linear", function () {
                            $(".personaj-rotatie5").animateRotate(20, 2000, "linear", function () {
                                $(".personaj-rotatie6").animateRotate(-20, 2000, "linear", function () {

                                });
                            });
                        });
                    });
                });
            });
        });
    });

那么如何使用“personaj”类循环制作 div 内容的动画？谢谢

Answer 1

您可以通过使用 @keyframes 单独在 CSS 中实现这一点。试试这个：

@-moz-keyframes rotating {
    0% { -moz-transform: rotate(-20deg); }
    50% { -moz-transform: rotate(20deg); }
    100% { -moz-transform: rotate(-20deg); }
}
@-webkit-keyframes rotating {
    0% { -webkit-transform: rotate(-20deg); }
    50% { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(-20deg); }
}
@keyframes rotating {
    0% { transform: rotate(-20deg); }
    50% { transform: rotate(20deg); }
    100% { transform: rotate(-20deg); }
}
.rotating {
    -webkit-animation: rotating 2s ease-in-out infinite;
    -moz-animation: rotating 2s ease-in-out infinite;
    -ms-animation: rotating 2s ease-in-out infinite;
    -o-animation: rotating 2s ease-in-out infinite;
    animation: rotating 2s ease-in-out infinite;
}

<img src="http://i.imgur.com/NVIpvHo.jpg" class="rotating" />