Comment puis-je forcer l'achèvement des animations de survol CSS3 ?

Forcer l'achèvement des animations CSS3 au survol

Lors de l'application d'une animation CSS3 à l'état :hover, l'animation s'arrête brusquement à la sortie de l'élément . Ce comportement peut être indésirable, en particulier pour les animations qui nécessitent un nombre spécifique d'itérations pour s'exécuter. Pour résoudre ce problème, envisagez les stratégies suivantes :

Utilisation de JavaScript :

La solution la plus directe consiste à utiliser JavaScript pour forcer l'achèvement de l'animation. Ceci peut être réalisé en ajoutant et en supprimant dynamiquement des classes d'animation via des écouteurs d'événements.

$(".element").hover(
  function() { $(this).addClass("animation-name"); },
  function() { $(this).removeClass("animation-name"); }
);

Utilisation des images clés CSS :

Bien qu'il n'existe actuellement aucune solution CSS uniquement qui force directement l'achèvement de l'animation au survol, une technique consiste à créer une image clé factice qui s'étend au-delà de l'animation au survol durée.

@keyframes bounce {
  ... (Original animation keyframes) ...
  99% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

En prolongeant légèrement la durée de l'image clé, l'animation continuera jusqu'à son achèvement même après la fin de l'état de survol.

Mises en garde potentielles :

Il est important de noter que forcer la fin de l'animation peut introduire des artefacts visuels dans certains cas. Par exemple, si l'animation contient des éléments en rotation, des arrêts ou des sauts brusques peuvent se produire lorsque la souris quitte l'élément.

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!