在jquery中使用setInterval让齿轮循环滚动

Question

1. 有一齿轮，现在做的动画是，鼠标悬浮时才会触发滚动事件，

2. 想做的动画是，页面加载完成后，隔一段时间齿轮会自己滚出去再滚回来。
   向右滚动和向左滚动都能实现，但是不知道jquery中怎么写“隔一段时间+滚出去再滚回来”

html:

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

css:

<style type="text/css">
    #wheel1{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        float: right;
    }
    #wheel2{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        
    }
    #wheel2:hover{
        transform: translate(1000px) rotate(720deg);
        transition: transform 8s ease;
    }
     #wheel1:hover{
        transform: translate(-500px) rotate(-720deg);
        transition: transform 8s ease;
    }
    p{
        font-size: 25px;
        color: white;
        margin: 30px;
    }

Answer 1

//到时见的时候
#wheel1{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        float: right;
        animation: myrotate2 8s ease forwards;
    }
    #wheel2{
        width: 150px;
        height: 150px;
        background-color: pink;
        border:5px dotted purple;
        border-radius: 80px;
        animation: myrotate1 8s ease forwards;
    }
    @keyframes myrotate1{
        from{transform: translate(0px) rotate(0deg);}
        to{transform: translate(1000px) rotate(720deg)}
    }

    @keyframes myrotate2{
        from{transform: translate(0px) rotate(0deg);}
        to{transform: translate(-500px) rotate(-720deg)}    
    }

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

Answer 2

隔一段时间使用setInterval函数：

setInterval(function(){
    滚出去再滚回来();
},一段时间);

Answer 3

方法一：纯CSS 实现
给两个齿轮添加向左滚 和 向右滚的样式
html

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

在样式里添加了无限循环滚动的动画。
如果需要滚出去隔一会再回来，可以把translate(-1000px)的值增大，比如 2000px，根据需求自己控制。
translate 的值增大后，需要响应的增大 rotate 的值，也是根据需求自己调节就行了。
css

#wheel1, #wheel2{
  width: 150px;
  height: 150px;
  background-color: pink;
  border:5px dotted purple;
  border-radius: 80px;
  position: absolute;
}
#wheel1{
  right: 0;
}
p{
  font-size: 25px;
  color: white;
  margin: 30px;
}
.roll-left{
  animation: roll-left 6s linear infinite; // 给动画添加 infinite 值，让动画无限循环
  -webkit-animation-direction:alternate; // 反向执行动画
  animation-direction:alternate;
}
.roll-right{
  animation: roll-right 6s linear infinite;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
}
@keyframes roll-left{
  from{}
  to {transform: translate(-1000px) rotate(-720deg)}
}

@keyframes roll-right{
  from{}
  to{transform: translate(1000px) rotate(720deg)}
}

方法二：使用jquery 控制
如果想用 jquery 控制的话，css　需要修改一下

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

js

setInterval(function(){
  $('#wheel1').addClass('roll-left').one('animationend', function() { // 每次动画完成后移除样式
    $('#wheel1').removeClass('roll-left');
  });
}, 2000); // 通过修改这个数值去控制每隔多久执行一次