Comment puis-je m'assurer que les animations de survol CSS3 sont entièrement terminées ?

Animation CSS3 en survol : garantir l'achèvement complet

En CSS3, les animations en survol offrent un moyen visuellement attrayant d'améliorer l'expérience utilisateur. Cependant, un problème courant survient lorsque l'animation s'arrête brusquement lors de la suppression du curseur de l'élément. Ce problème peut être frustrant, surtout lorsque l'on souhaite que l'animation suive son cours complet.

Animation d'images clés avec interruptions

L'extrait de code fourni montre une simple animation de rebond déclenchée en utilisant l'état :hover. Cependant, comme mentionné dans la question, l'animation s'arrête prématurément lorsque le curseur de la souris quitte l'élément. En effet, les animations de survol sont basées sur des événements et ne s'exécutent que lorsque l'événement spécifié (dans ce cas, le survol de la souris) est actif.

Ne pouvons-nous pas forcer une animation complète ?

Malheureusement, forcer une animation CSS3 à continuer au-delà de l'événement déclencheur n'est pas possible avec CSS seul. La spécification ne fournit pas de solution simple pour ce scénario.

Amélioration de l'expérience avec JavaScript

Pour remédier à cette limitation, JavaScript peut être incorporé pour étendre les fonctionnalités de animation de survol. En ajoutant l'animation en tant que classe et en la supprimant une fois l'animation terminée, nous pouvons garantir son exécution complète quelle que soit la position de la souris.

Implémentation du code JavaScript

Le Le code JavaScript suivant résout le problème :

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

Dans ce script, l'animation est appliquée en tant que classe ("animée") et supprimée lorsque l'animation atteint sa fin, permettant l'itération complète à terminer même après que la souris ait quitté l'élément.

Conclusion

Bien qu'il soit vrai que le CSS pur ne peut pas imposer l'achèvement de l'animation au-delà de l'événement déclencheur, l'intégration de JavaScript fournit une solution flexible et efficace pour résoudre ce problème. En combinant l'animation CSS avec les capacités de gestion d'événements de JavaScript, nous pouvons créer des animations réactives et attrayantes qui répondent à des exigences spécifiques.

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!