CODEWITHSUNDEEP
jqueryloopsanimation
EPurpl3
EPurpl3

Reputation: 752

How can i make a jQuery animation loop on infinite, after it finish?

I have a jQuery animation, i have a flying monkey that has to rotate from left to right and from right to left, is working fine but i have to make the monkey loop. Right now i have improvised, i have made several divs into each other that rotate after the previews div finished rotating.

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 () {

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

So how can i make the animation of the content of the div with the class "personaj" loop? Thank you

Upvotes: 2

Views: 1249

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can achieve this in CSS alone through the use of @keyframes. Try this:

@-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" />

Upvotes: 2

Related Questions