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

Question

Il y a un engrenage. L'animation que nous réalisons maintenant est que l'événement de défilement sera déclenché lorsque la souris survole. L'animation que nous voulons faire est qu'une fois la page chargée, l'engrenage se déroulera et reviendra après un certain temps. de temps. Le défilement à droite et le défilement à gauche peuvent être obtenus, mais je ne sais pas comment écrire "après un certain temps + déployer puis revenir en arrière..." dans 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

Utilisez la fonction setInterval de temps en temps :

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

高洛峰 · Answer

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


  
Running right


  
Running left

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