html - Menggunakan setInterval dalam jquery untuk membuat tatal gear dalam gelung

Question

1. Ada gear sekarang ialah acara skrol akan dicetuskan apabila tetikus melayang,

2. Animasi yang saya ingin buat ialah selepas halaman dimuatkan, gear akan dilancarkan dan kembali semula selepas beberapa ketika.
   Menatal ke kanan dan menatal ke kiri boleh dicapai, tetapi saya tidak tahu cara menulis "selepas tempoh masa + gulung dan gulung semula" dalam 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

Gunakan fungsi setInterval sekali sekala:

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

Answer 3

Kaedah 1: Pelaksanaan CSS tulen
Tambahkan gaya tatal kiri dan kanan pada dua gear
html

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

Menambahkan animasi tatal gelung tak terhingga pada gaya.
Jika anda perlu keluar dan kembali selepas beberapa ketika, anda boleh meningkatkan nilai translate(-1000px), seperti 2000px, dan mengawalnya mengikut keperluan anda.
Selepas nilai terjemah meningkat, nilai putaran perlu ditingkatkan dengan sewajarnya, dan anda boleh melaraskannya mengikut keperluan anda.
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)}
}

Kaedah 2: Gunakan kawalan jquery
Jika anda ingin menggunakan kawalan jquery, css perlu diubah suai

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