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

Question

Terdapat gear. Animasi yang kami buat sekarang ialah acara tatal akan dicetuskan apabila tetikus melayang Animasi yang ingin kami buat ialah selepas halaman dimuatkan, gear akan keluar dan kembali semula selepas satu tempoh masa. Kedua-dua tatal kanan dan tatal kiri boleh dicapai, tetapi saya tidak tahu bagaimana untuk menulis "selepas tempoh masa + gulung keluar dan kemudian gulung semula..." dalam 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

Gunakan fungsi setInterval sekali sekala:

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

高洛峰 · Answer

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


  
Running right


  
Running left

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