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

Question

There is a gear. The animation we are making now is that the scroll event will be triggered when the mouse is hovering. The animation we 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 then roll back..." in jquery.

仅有的幸福 · Answer

//到时见的时候
#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

Use the setInterval function every once in a while:

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

高洛峰 · Answer

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


  
Running right


  
Running left

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