html - Using setInterval in jquery to make gears scroll in a loop

Question

1. There is a gear. The animation we are doing now is that the scroll event will be triggered when the mouse is hovering.

2. The animation I want to make is that after the page is loaded, the gear will roll out and back again after a period of time.
   Both right scrolling and left scrolling can be achieved, but I don’t know how to write "after a period of time + roll out and roll back" in jquery

html:

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

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

Use the setInterval function every once in a while:

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

Answer 3

Method 1: Pure CSS implementation
Add left scrolling and right scrolling styles to the two gears
html

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

Added infinite loop scrolling animation to the style.
If you need to go out and come back after a while, you can increase the value of translate(-1000px), such as 2000px, and control it according to your needs.
After the value of translate increases, the value of rotate needs to be increased accordingly, and you can just adjust it according to your needs.
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)}
}

Method 2: Use jquery control
If you want to use jquery control, the css needs to be modified

.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); // 通过修改这个数值去控制每隔多久执行一次