CODEWITHSUNDEEP
jquerycssanimation
L Tulip
L Tulip

Reputation: 59

css animation , just want to use setInterval to make the animation work many times ,but it only work once

there are two wheels,one rolls left ,one rolls right,I want to use jquery to make the wheels roll one by each other and loop, I could write one wheel in jquery,but I don't know how to write them in a jquery animation queue.

html:

<div id="wheel1">
    <p>Running left</p>
</div>
<div id = "wheel2">
    <p>Running right</p>
</div>

css:

#wheel1{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        float: right;
        /*animation: myrotate2 3s ease-out forwards;*/
    }
    .roll-left{
        animation: roll-left 2s ease-out forwards;
    }
    @keyframes roll-left{
     0% {}
     50% {transform: translate(-1000px) rotate(-720deg)}
     100% {}
    }
    #wheel2{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        /*animation: myrotate1 3s ease forwards;*/

    }
    .roll-right{
        animation: roll-right 2s ease forwards;
    }
    @keyframes roll-right{
      0% {}
     50% {transform: translate(1000px) rotate(720deg)}
     100% {}
    }

    p{
        font-size: 25px;
        color: white;
        margin: 30px;
    }

jquery:

setInterval(function(){
        $("#wheel1").addClass('roll-left').one('animationed',function(){
            $("#wheel1").removeClass('roll-left');
        });
    },2000);

Upvotes: 1

Views: 81

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

To loop your animation you should use animation-iteration-count

animation-iteration-count: infinite;

you need to tweak your animations

#wheel1{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        float: right;
        /*animation: myrotate2 3s ease-out forwards;*/
    }
    .roll-left{
        animation: roll-left 2s ease-out forwards;
        animation-iteration-count: infinite;
    }
    @keyframes roll-left{
     0% {}
     25% {transform: translate(-1000px) rotate(-720deg)}
     50% {transform: translate(0) rotate(0)}/*wait for the secon animation to start*/
    }
    #wheel2{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        /*animation: myrotate1 3s ease forwards;*/

    }
    .roll-right{
        animation: roll-right 2s ease forwards;
       animation-iteration-count: infinite;
    }
    @keyframes roll-right{
     0%{}
     50% {transform: translate(0) rotate(0)}/*wait for the first animation to stop*/
     75% {transform: translate(1000px) rotate(720deg)}
     100% {}
    }

    p{
        font-size: 25px;
        color: white;
        margin: 30px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wheel1" class="roll-left">
    <p>Running left</p>
</div>
<div id = "wheel2" class="roll-right">
    <p>Running right</p>
</div>

Upvotes: 2

Udhay Titus
Udhay Titus

Reputation: 5869

animation-iteration-count: infinite;

is correct try this in your css

setInterval(function(){

        $("#wheel1").addClass('roll-left').one('animationed',function(){
            $("#wheel1").removeClass('roll-left');
        });
    },2000);
    
    setInterval(function(){
        $("#wheel2").addClass('roll-right').one('animationed',function(){
            $("#wheel2").removeClass('roll-right');
        });
    },2000);
  
    
#wheel1{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        float: right;
        /*animation: myrotate2 3s ease-out forwards;*/
    }
    .roll-left{
        animation: roll-left 2s ease-out forwards;
        animation-iteration-count: infinite;
    }
    @keyframes roll-left{
     0% {}
     50% {transform: translate(-1000px) rotate(-720deg)}
     100% {}
    }
    #wheel2{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        /*animation: myrotate1 3s ease forwards;*/

    }
    .roll-right{
        animation: roll-right 2s ease forwards;
        animation-iteration-count: infinite;
    }
    @keyframes roll-right{
      0% {}
     50% {transform: translate(1000px) rotate(720deg)}
     100% {}
    }

    p{
        font-size: 25px;
        color: white;
        margin: 30px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wheel1">
    <p>Running left</p>
</div>
<div id = "wheel2">
    <p>Running right</p>
</div>

Upvotes: 1

Related Questions