ANIMATE.CSS Basic Use Method

Animate.css is a bunch of cool, fun, cross-browser animation libraries that you can use in your projects at your own discretion. Use it anywhere you want to highlight, such as the home page, slider, which is as easy as drinking water and is a dead fan.

Usage

Using ANIMATE.CSS on your site, simply insert the stylesheet into the document and add a CSS class name to the element that needs animation, as well as the name of the animation. That's it! You'll have a CSS animation effect. Super strong!

<head>  <link rel="stylesheet" href="animate.min.css"></head>

When combined with jquery, you can decide when to enable these animations and add animations using jquery dynamically, and you can do more things:

$(‘#yourElement‘).addClass(‘animated bounceOutLeft‘);

You can also detect end-of-animation events:

$(‘#yourElement‘).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘doSomething);

Note: Jquery.one () performs event processing at most once. Click here to learn more.

You can change the duration of the animation, increase the delay, or change the display count:

#yourElement{  -vendor-animation-duration: 3s;  -vendor-animation-delay: 2s;  -vendor-animation-iteration-count: infinite;}

Note: Be sure to replace "vendor" with the prefix of CSS Tian (WebKit, Moz, etc.)

<! DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href ="Css/animate.css"/>        <style type="Text/css">  #ball  {width : 200  px  ; height :    px  ; background :   #F08080   ; border-radius :  50 %  ; margin :   px Auto  ;    </style>        <script src="js/jquery-2.2.3.min.js" type="Text/javascript " CharSet="Utf-8"></script>    </head>    <body>        <div class="Animated Bouncein" id="Ball">        </div>        <div class="Input-ui">             <input type="text" name= "" " id=" "  Value="" class="Input-ui-txt" />             <input type="button" name= "" " id=" changeanimation " value=" Change animation " />        </div>        <script type="Text/javascript">( function($){                //console.log ($ ('. Ball '));                 function changeanimations(ele,type){                    if(typeofEle = = =' String ') {$ (ele). Removeclass (). addclass (Type +' animated '). One (' webkitanimationend mozanimationend msanimationend oanimationend animationend ', function(){$( This). Removeclass (); });return; } ele.removeclass (). addclass (Type +' animated '). One (' webkitanimationend mozanimationend msanimationend oanimationend animationend ', function(){$( This). Removeclass ();                }); }varInput = $ ('. Input-ui-txt ');varBall = $ (' #ball '); $("#changeanimation"). Click ( function(event){Event.preventdefault (); Event.stoppropagation ();varval = Input.val ();                Changeanimations (Ball,val);            }); })($);</script>    </body></html>

ANIMATE.CSS Basic Use Method