Animate.css 基础使用方法

最新推荐文章于 2024-08-07 15:34:36 发布

F2E前端爱好者

最新推荐文章于 2024-08-07 15:34:36 发布

阅读量1.7w

点赞数 1

分类专栏： css3 javascript jquery bootstrap web

本文链接：https://blog.csdn.net/laike1355/article/details/51354746

版权

javascript 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

jquery

22 篇文章 0 订阅

订阅专栏

css3

21 篇文章 0 订阅

订阅专栏

animate.css是一堆很酷的，有趣的，跨浏览器的动画效果库，你可以随意在你的项目中使用。用在你想要突出的任何地方，如主页，滑块，这像喝水一样容易，迷死人了。

用法

在您的网站上使用animate.css，只要简单地把样式表插入到文档中的中，并为需要动画的元素添加一个CSS类名即可，以及动画的名称。就是这样！你就有了一个CSS动画效果。超强！

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

当与jQuery结合起来，你可以自己决定何时启用这些动画，通过jQuery动态添加使用动画，你可以做的事情更多：

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

你还可以检测动画结束事件：

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

注：jQuery.one（）最多执行事件处理一次。点击此处了解详情。

您可以更改动画的持续时间，增加延迟或改变显示次数：

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

注意：一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”


<!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:200px;
                height: 200px;
                background: #F08080;
                border-radius: 50%;
                margin:100px 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="改变动画" />
        </div>
        <script type="text/javascript">
            (function($){
                //console.log($('.ball'));
                function changeAnimations(ele,type){
                    if(typeof ele === '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();
                    });
                }
                var input = $('.input-ui-txt');
                var ball = $('#ball');
                $("#changeanimation").click(function(event){
                    event.preventDefault();
                    event.stopPropagation();
                    var val = input.val();
                    changeAnimations(ball,val);
                });


            })($);
        </script>
    </body>
</html>