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

Question

有两个轮子，一个向左滚动，一个向右滚动，我想用jquery让轮子一个一个滚动并循环，我可以用jquery写一个轮子，但我不知道怎么写它们在 jquery 动画队列中。

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

Answer 1

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

animation-iteration-count: infinite;

你需要调整你的动画

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