一、基本用法

引入CSS依赖

在元素的Class中加以下内容

animated (必选)

infinite (可选) 无限重复

bounce (必选) 动画样式 参考下方表格

delay-2s (可选) 延迟出现

Class Name

bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

jackInTheBox

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

heartBeat

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

基本用法就是这些

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

二、进阶用法

动态调用动画的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官网

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

https://zzzmh.cn/single?id=59