css动画，只想使用setInterval使动画多次工作，但它只能工作一次

Question

有两个轮子，一个卷左，一个卷右，我想用jquery让轮子一个接一个地滚动并循环，我可以在jquery中写一个轮子，但我不知道如何将它们写在jquery动画队列中。

HTML：

#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;
    }

的CSS：

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

jquery的：

{{1}}

Answer 1

要循环动画，您应该使用animation-iteration-count

animation-iteration-count: infinite;

你需要调整你的动画

＆＃13;

＆＃13;

#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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

animation-iteration-count: infinite; 

是正确的尝试在你的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>