Comment redémarrer efficacement les animations CSS3 sans utiliser de délais d'attente ?

Revisiter le redémarrage de l'animation CSS3 : dévoiler une approche alternative

Le redémarrage des animations CSS3 peut poser des défis, en particulier lorsque l'on tente de restaurer l'échelle d'un élément et de le réanimer à son état d'origine . Bien que la suppression et la réinsertion d'un élément offrent une solution de contournement, ce n'est peut-être pas la solution la plus efficace.

Une approche plus élégante consiste à tirer parti de la redistribution pour appliquer les modifications sans dépendre des délais d'attente. La fonction JavaScript suivante illustre cette technique :

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

En conjonction avec le CSS et le HTML ci-dessous, cette fonction permet une réinitialisation transparente de l'animation en cliquant :

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div>

Par déclenchant une refusion, l'animation est réinitialisée sans avoir besoin de retards ou de timing complexes. Cette approche fournit une solution propre et efficace pour redémarrer toute animation CSS3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!