title: css animation , just want to use setInterval to make the animation work many times ,but it only work once
body: <p>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.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="wheel1"&gt;
      &lt;p&gt;Running left&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id = "wheel2"&gt;
      &lt;p&gt;Running right&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#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;
      }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>setInterval(function(){
          $("#wheel1").addClass('roll-left').one('animationed',function(){
              $("#wheel1").removeClass('roll-left');
          });
      },2000);
  </code></pre>