html - Utilisation de setInterval dans jquery pour faire défiler les engrenages en boucle

Question

1. Il y a un engrenage. L'animation est maintenant que l'événement de défilement sera déclenché lorsque la souris survole,

2. L'animation que je souhaite créer est qu'une fois la page chargée, l'équipement se déroulera et reviendra après un certain temps.
   Le défilement vers la droite et le défilement vers la gauche peuvent être réalisés, mais je ne sais pas comment écrire "après un certain temps + déployer et revenir en arrière" dans 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

Utilisez la fonction setInterval de temps en temps :

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

Answer 3

Méthode 1 : implémentation CSS pure
Ajoutez des styles de défilement à gauche et de défilement à droite aux deux engrenages
html

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

Ajout d'une animation de défilement en boucle infinie au style.
Si vous devez sortir et revenir après un certain temps, vous pouvez augmenter la valeur de translate(-1000px), par exemple 2000px, et la contrôler en fonction de vos besoins.
Une fois la valeur de translation augmentée, la valeur de rotation doit être augmentée en conséquence, et vous pouvez simplement l'ajuster en fonction de vos besoins.
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)}
}

Méthode 2 : Utiliser le contrôle jquery
Si vous souhaitez utiliser le contrôle jquery, le CSS doit être modifié

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