Does animate.style support on hover animation

Question

I want to use animate.style to show animation effect on hover and not on page load, New version of animate.css which is animate.style doesn't seems to have hover part mentioned in documentation.

Not sure if this is supported or there is a different way of doing it.

A pointer in this direction would be helpful as i want to have all the animation on move hover

.d-flex  div {background:red;}




  
    
        
            
                
                    AMENITIES
                
                
                    
                        90 Berth Marina and Yacht Club
                    
                        Excelllent Hospitality Experiences
                    
                        Seaside and Marina Promenades
                    
                        Private Landscaped Terraces
                    
                        Private Facilities and Amenities
                    
                        Swimming Pools
                    
                        Beach Access
                    
                        Cafes

                
          
        
    
  













  Flex item 1
  Flex item 2
  Flex item 3
  Flex item 4
  Flex item 5
  Flex item 6
  Flex item 7

In old version i achieved this using jQuery, but this is not working in new version

$(".wrapper").hover(function () {
        $(this).addClass("iconimage animated flipInY").delay(300);
        setTimeout(function () {
            $(this).addClass("iconimage animated flipInY");
        }, 200);
    }, function () {
        
        setTimeout(function () {
          
        }, 1000);
    });

    $(".SponsorLogoImg").mouseout(function () {
        
        setTimeout(function () {
         
        }, 100);
    });

user_12902006 · Answer

For example, if you do this, the target animation will be executed.

The range of influence can be reduced by using the ID instead of the target class.

.animate__animated:hover {
    animation-name: flip;
    animation-duration: 1s;
}

user_15523591 · Answer

You can use JavaScript or jQuery for this.

For example:-

$(elem).mouseover(function(){
  $(this).addClass("animate__animated animate__flip");
  //You can add some other classes as well
}); 
//If you want the animation to happen every time you hover on element
$(elem).mouseout(function(){
  $(this).removeClass("animate__animated animate__flip");
});

1 or more animations

$(elem).mouseover(function(){
    $(this).addClass("animate__animated animate__flip");
    //You can add some other classes as well
    this.addEventListener('animationend',() => {
       $(this).removeClass("animate__animated animate__flip");
       //the second animation now
       $(this).addClass("animate__animated animate__bounce");
    });
});

Extras

There is a library animate.css-dynamic which is simple to use with some utility classes and more.

For for your case using this library you can do something like this.





 Mouse over or click the image to animate
Excelllent Hospitality Experiences

visit here for detailed documentation.

Does animate.style support on hover animation

2 Answers