Can CSS3 :hover Animations Be Forced to Complete Their Cycle After Mouseout?

CSS3 Animation on :hover; Forcing the Entire Animation

In CSS3, a common animation technique is using :hover to trigger an animation on an element. However, when the cursor is removed from the element, the animation abruptly stops.

Question

Can CSS3 animations on :hover be forced to continue the full animation cycle even after the mouse leaves the element?

Answer

Unfortunately, CSS3 alone cannot accomplish this. The only solution is to use a combination of CSS and JavaScript.

JavaScript Solution

Here's how to achieve the desired result using JavaScript:

• Add the animation as a class to the element.
• Remove the animation class once the animation finishes.

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

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

This approach ensures that the animation continues its full cycle regardless of the cursor's position on the element.

The above is the detailed content of Can CSS3 :hover Animations Be Forced to Complete Their Cycle After Mouseout?. For more information, please follow other related articles on the PHP Chinese website!