Twitter Bootstrap Question posted in

Does animate.style support on hover animation-Twitter bootstrap

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;}
<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>

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);
    });
Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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.

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

    visit here for detailed documentation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search