animate.style 是否支持悬停动画

Question

我想使用 animate.style 在悬停时显示动画效果，而不是在页面加载时显示动画效果，animate.css 的新版本 animate.style 似乎没有提到悬停部分在文档中。

不确定这是否受支持或是否有不同的方法。

这个方向的指针会很有帮助，因为我想让所有的动画都悬停

.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>Excelllent 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>

在旧版本中，我使用 jQuery 实现了此功能，但这在新版本中不起作用

$(".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);
    });

Answer 1

例如，如果你这样做，目标动画将被执行。

使用ID代替目标可以缩小影响范围class。

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

Answer 2

您可以为此使用 JavaScript 或 jQuery。

例如：-

$(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 个或多个动画

$(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");
    });
});

额外内容

有一个库 animate.css-dynamic 可以简单地与一些实用程序类等一起使用。

对于你使用这个库的情况，你可以这样做。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js"></script>

<h2 align="center"> Mouse over or click the image to animate</h2>
<img class="img-fluid ani_flip aniUtil_onMouse aniUtil_onClick aniUtil_active" style="max-width:80px" src="https://img.icons8.com/wired/2x/ccleaner.png" /><p>Excelllent Hospitality Experiences</p></div></div>

访问 here 获取详细文档。

animate.style 是否支持悬停动画

Does animate.style support on hover animation

html

css

animation

animate.css