Animate.css 超强CSS3动画库，三行代码搞定H5页面动画特效！

一、基本用法

引入CSS依赖

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">

在元素的Class中加以下内容

1. animated ( 必选 )
2. infinite (可选) 无限重复
3. bounce ( 必选 ) 动画样式 参考下方表格
4. delay-2s (可选) 延迟出现

<div class="animated infinite bounce delay-2s"><h1>Example</h1></div>

大功告成，刷新页面即可查看动画效果。

基本用法就是这些

官方还给出了一些进阶用法如下

二、进阶用法

动态调用动画的Javascript例子

function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

三、在官方例子基础上，稍加修改以后

由于官方例子用的是querySelector，故只会选中第一个符合要求的元素。

并且持续时间只有slow(2s)、slower(3s)、fast(800ms)、faster(500ms)

故我稍加修改，依然用的原生JS语法(部分ES6)

其中选择器element改为选中所有符合要求的元素

新增times参数，可以是2000ms或者2s

/**
 * element: 选择器 例如 #id | .class | div
 * animationName: 动画名称 参考animate.css官网 例如fadeIn
 * times: 持续时间 例如 200ms | 2s
 * callback: 回调函数
 */
function animateCss(element, animationName,times, callback) {
    const nodes = document.querySelectorAll(element)
    nodes.forEach((node => {
        if(times) node.style.setProperty('animation-duration', times, 'important');
        node.classList.add('animated', animationName)
        function handleAnimationEnd() {
            node.classList.remove('animated', animationName)
            node.removeEventListener('animationend', handleAnimationEnd)

            if (typeof callback === 'function') callback()
        }
        node.addEventListener('animationend', handleAnimationEnd)
    }))
}

例子

animateCss('.post', 'pulse');
animateCss('.post', 'pulse','200ms');
animateCss('.post', 'pulse','200ms',function(){//do something});

Animate.css官网

另外本篇文章也发表在了我的个人主页，欢迎来查看