Animate.css的初入门

推荐一个网站最牛前端
Animate.css是css动画库,封装了一些动画效果想要使用的话直接在github上下载,因为是css库,所以直接使用link链入就可以了

地址
http://daneden.github.io/animate.css/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<!--醉牛前端-->
<div class="animated infinite fadeIn"></div>
</body>
</html>

动画效果的话可以直接在Animate.css中试,拿到自己想要的动画效果
在添加class时一定要写上animated 再写其他想要实现的动画,因为动画效果都是基于animated来实现的

如果自己想要修改animate库里的默认属性可以在css中通过.animated修改

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 30px auto;
        }
        /*我自己可以在这里修改animate库里的默认动画属性*/
        .animated {
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
    </style>
</head>
<body>
<div class="animated slideInDown"></div>
</body>

一个小demo来加深印象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        body{
            background: rgba(0,0,0,.5);
        }
        div{
            width: 300px;
            height: 300px;
            background: pink;
            margin: 100px auto;
        }
    </style>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(function() {
            $('button').on('click', function () {
                //1.增加class
                $('div').addClass('animated shake');


                //2.页面的刷新
                setTimeout(function () {
//                    window.location.reload(); //如果不加那么只能运行一次除非重新刷新页面在点击时才会有动画

                    //添加回调函数
                    //先删除再添加
//                    $('div').removeClass('shake');
//                    $('div').addClass('bounceOut');
                    $('div').removeClass('shake').addClass('bounceOut');
                }, 1000)
            })
        })
    </script>
</head>
<body>
<button>点击</button>
<div>
</div>
</body>

有两个动画效果.

Animate.css的初入门

推荐阅读更多精彩内容