Les animations CSS3 :hover peuvent-elles être forcées de terminer leur cycle après le retrait de la souris ?

Animation CSS3 sur :hover; Forcer l'intégralité de l'animation

En CSS3, une technique d'animation courante consiste à utiliser :hover pour déclencher une animation sur un élément. Cependant, lorsque le curseur est retiré de l'élément, l'animation s'arrête brusquement.

Question

Les animations CSS3 sur :hover peuvent-elles être forcées à continuer le cycle d'animation complet même après que la souris quitte l'élément ?

Réponse

Malheureusement, CSS3 seul ne peut pas accomplir cela. La seule solution est d'utiliser une combinaison de CSS et JavaScript.

Solution JavaScript

Voici comment obtenir le résultat souhaité en utilisant JavaScript :

• Ajouter l'animation comme une classe à l'élément.
• Supprimer la classe d'animation une fois l'animation se termine.

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

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

Cette approche garantit que l'animation continue son cycle complet quelle que soit la position du curseur sur 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!