I am interested in utilizing animate.style to display animation effects on hover rather than on page load. The new version of animate.css, known as animate.style, does not appear to have the hover functionality mentioned in its documentation.
I am unsure if this feature is supported or if there is an alternative approach to achieve it.
Any guidance in this area would be greatly appreciated as I aim to incorporate all animations upon hovering.
.d-flex div {background:red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.0.1/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid my-5 bg-light">
<div class="row">
<div class="col-12 p-0">
<div class="container py-5 text-center">
<div class="row">
<div class="col-12"><h1>AMENITIES</h1></div>
</div>
<div class="row p-2">
<div class="col-lg-3 col-md-6 col-sm-12 p-3 ">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__lightSpeedInRight" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>90 Berth Marina and Yacht Club</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__flip" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Excellent Hospitality Experiences</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__rotateIn" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Seaside and Marina Promenades</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__rotateIn" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Private Landscaped Terraces</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__rotateIn" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Private Facilities and Amenities</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__rotateIn" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Swimming Pools</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__rotateIn" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Beach Access</p></div></div>
<div class="col-lg-3 col-md-6 col-sm-12 p-3 h-100">
<div class="shadow-sm bg-white p-3"><img class="img-fluid animate__animated animate__rotateIn" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Cafes</p></div></div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<br>
<br>
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight m-3">Flex item 1</div>
<div class="p-2 bd-highlight m-3">Flex item 2</div>
<div class="p-2 bd-highlight m-3">Flex item 3</div>
<div class="p-2 bd-highlight m-3">Flex item 4</div>
<div class="p-2 bd-highlight m-3">Flex item 5</div>
<div class="p-2 bd-highlight m-3">Flex item 6</div>
<div class="p-2 bd-highlight m-3">Flex item 7</div>
</div>In the old version, I was able to achieve this using jQuery, but unfortunately, it does not work in the 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);
});