Comment puis-je redémarrer efficacement les animations CSS3 ?

Redémarrage des animations CSS3 : simplifié

Dans le monde des animations CSS3, il n'est pas rare de rencontrer des scénarios où il faut redémarrer une animation sur demande. Bien qu'il existe différentes approches pour y parvenir, celle qui a suscité la curiosité est la technique de suppression et de réinsertion de l'élément animé. Bien que fonctionnel, il laisse de la place à l'optimisation.

Une méthode rationalisée

Heureusement, il existe un moyen plus élégant et plus efficace de redémarrer les animations CSS3 : utiliser la redistribution pour forcer une mise à jour. au style de l'élément. En supprimant temporairement le style d'animation, en déclenchant une redistribution, puis en rétablissant l'animation, vous pouvez la réinitialiser efficacement sans introduire de complexité inutile.

Mise en œuvre pratique

Voici un JavaScript fonction qui démontre cette approche :

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

En accompagnement de cette fonction, définissez des règles CSS pour l'élément animé et une animation d'image clé, comme illustré ci-dessous :

#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; }
}

Enfin, incluez le balisage HTML :

<div>

Cette approche redémarre efficacement l'animation chaque fois que vous cliquez sur le bouton « Réinitialiser », sans avoir besoin de délais d'attente complexes ou manipulation d'éléments.

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!