今天介绍一个强大的CSS3库
Animate.css
库如其名，是一个动画库
通过它我们非常轻松地添加动画效果
“Just-add-water CSS animations”
像灌水一样简单
我们只需要添加几个类名
下载地址及动画效果戳这里：Animate.css
使用这个库只需要把animate.css引入我们的文件即可

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

静态使用

静态使用也就是最基本的使用方法
直接给元素加class类名
以弹跳bounce动画效果为例

<h1 class="animated bounce">Animate</h1>

animated是必须要添加的类名
只有添加了它，Animate.css库才认为我们是要使用它的动画效果

/*源码*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

看了源码我们也可以DIY动画时间等等

类名中bounce就是动画效果的类名

这样设置的样式默认是动一次
如果你想让这个动画无限循环下去
那就添加一个inifinite

<h1 class="animated bounce infinite">Animate</h1>

/*源码*/
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

这种静态的使用方法优点不用说
不用js，添加类名，轻松实现动画
缺点同样明显
我们并不能很好的控制它
若不考虑无限循环动画
只有网页刚刚加载完毕后元素才动一次
应用的场景大概仅仅是
开场吸引用户注意的动画或者loading加载动画

为了能够更好的利用它
我们还是要配合js来使用

动态使用

动态使用无非就是想让元素运动就添加类名
元素运动完就移除类名（需要监听动画结束事件）
这里我扩展jQuery给大家演示一下
通过点击一个按钮来使文字“弹跳”

<h1 id="demo">Animate</h1>
<button id="btn">click</button>

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});
$('#btn').on('click',function(){
    $('#demo').animateCss('bounce');
});

每次点击按钮都会有一个动画效果

也可以用原生js简单实现

var btn = document.getElementById('btn');
var demo = document.getElementById('demo');
btn.onclick = function(){
    demo.addEventListener('animationend', function(){
        this.className = '';
        this.removeEventListener('animationend', false);
    }, false);
    demo.className = 'animated bounce';    
}

大家还可以扩展函数，控制动画的次数、时间等等
这样便实现了我们对于动画的控制

最后补充一点
行级元素（span标签、a标签等等）是不能够使用这个Animate.css动画效果的
换句话说，行级元素添加库的类名是无效的

这个动画库确实很厉害
看它的源码就会发现
很多keyframes细节都处理的非常好
可不是简单的晃两下
作者 Daniel Eden 不愧是大神
把这个强大又酷炫的CSS3动画库
推荐给大家

==主页传送门==

强大而酷炫的CSS3动画库Animate.css使用方法

静态使用

动态使用

猜你喜欢