Comment puis-je m'assurer que les animations CSS3 sont terminées à la sortie de l'élément :hover ?

Forcer l'achèvement de l'animation CSS3 lors de la sortie de l'élément :hover

Les animations CSS3 dans l'état :hover offrent un moyen élégant d'ajouter de l'interactivité aux éléments. Cependant, une limitation est que l'animation s'interrompt brusquement lorsque le curseur quitte l'élément. Voici comment surmonter ce problème et forcer l'animation à terminer son exécution, uniquement via CSS :

L'animation fournie, rebond, définit une série d'images clés qui créent un effet de rebond. Pour forcer l'animation à continuer même après que la souris ait quitté l'élément, nous adoptons une technique astucieuse.

1. Ajouter un déclencheur de classe :
   Créez une classe distincte, dites ' animé', avec son animation correspondante (les mêmes images clés de rebond que vous avez définies).
2. Déclenchez l'animation avec Survol :
   Dans l'état :hover de l'élément, au lieu d'appliquer directement l'animation, ajoutez la classe animée. Cette classe contient l'animation réelle.
3. Supprimez le déclencheur à la fin de l'animation :
   Utilisez JavaScript pour écouter l'événement de fin d'animation. Une fois l'animation terminée, supprimez la classe animée de l'élément. Cela arrêtera effectivement l'animation.

Voici un exemple modifié :

<style>
@keyframes bounce { /* Same as before */ }
.animated { animation: bounce 1s; }
</style>

<div class="box">
  Hover me!
</div>

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

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

Avec cette approche, l'animation continuera à jouer même après que le curseur quitte la .box élément. Visitez ce Fiddle mis à jour pour une démonstration en direct : http://jsfiddle.net/u7vXT/1.

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!