"click animation with animate css"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel='stylesheet' type='text/css'> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" rel='stylesheet' type='text/css'> <div class="container"> <div class="row"> <button class="btn btn-success" data-animation="bounce">Bounce</button> <button class="btn btn-primary" data-animation="pulse">Pulse</button> <button class="btn btn-default" data-animation="fadeInLeftBig">Fade in</button> <button class="btn btn-info" data-animation="fadeOutRightBig">Fade out</button> <button class="btn btn-danger" data-animation="flip">Flip</button> <div id="circle"></div> </div> </div>
body { text-align: center; } #circle { border-radius: 50%; margin: 50px auto; width: 50px; height: 50px; background-color: #93d0ea; } .btn { font-weight: 400; font-family: 'Roboto', sans-serif; text-align: center; white-space: nowrap; width: 100px; height: 50px; margin: 10px 15px; }
var btn = document.querySelectorAll("button"), circle = document.querySelector("#circle"); // First, we have to add a class of animated to our object, so the library can recognize it. circle.classList.add('animated'); // We iterate over all of our buttons and add event listeners to each one. for (var i = 0; i < btn.length; i++) { // Define an anonymous function here, to make it possible to use the i variable. (function (i) { btn[i].addEventListener('click', function () { // To start an animation you just have to add a specific class to the object. // In our case we stored the classes' names in the data-animation attribute of each button. var animation = btn[i].getAttribute('data-animation'); circle.classList.add(animation); // To make it work more then once we have to remove the class after the animation is complete. window.setTimeout(function () { circle.classList.remove(animation); }, 1000); }); }(i)); }

Related: See More


Questions / Comments: