Comment redémarrer une animation CSS3 en douceur sans gigue ?

Comment redémarrer de manière transparente une animation CSS3

Si vous avez une animation CSS3 qui doit redémarrer lors d'un déclencheur comme un clic, vous' Nous serons confrontés à un dilemme : le faire évoluer continuellement peut entraîner des retards et de la complexité. Bien que la suppression et la réinsertion de l'élément animé puissent fonctionner, cela vaut la peine d'explorer une solution plus élégante.

Heureusement, il existe une technique utilisant la redistribution qui peut fournir une réinitialisation en douceur. En désactivant temporairement l'animation, en forçant une redistribution, puis en la réactivant, vous pouvez effectivement redémarrer l'animation sans aucun délai ni interruption. Voici comment cela fonctionne :

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none'; // Temporarily disable animation
  el.offsetHeight; // Force reflow
  el.style.animation = null; // Re-enable animation
}

Cette approche exploite le comportement des navigateurs pour recalculer le flux de documents (reflow) lorsque certaines propriétés changent. En désactivant et réactivant l'animation, vous forcez le navigateur à réinitialiser les propriétés de l'animation, ce qui la redémarre effectivement.

N'oubliez pas que cette technique ne se limite pas à jQuery ou Move.js ; vous pouvez l'utiliser avec n'importe quelle animation CSS. Ainsi, la prochaine fois que vous aurez besoin de redémarrer une animation CSS, envisagez d'utiliser cette méthode basée sur la redistribution pour une solution transparente et efficace.

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!