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

一、基本用法引入CSS依赖<link rel=“stylesheet” href=“https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">在元素的Class中加以下内容animated (必选)infinite (可选) 无限重复bounce (必选) 动画样式 参考下方表格delay-2s (可选) 延迟出现 <div class=“animated infinite bounce delay-2s”><h1>Example</h1></div>Class Name bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingejackInTheBoxrollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUpheartBeat大功告成，刷新页面即可查看动画效果。基本用法就是这些官方还给出了一些进阶用法如下二、进阶用法动态调用动画的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://daneden.github.io/animate.css/https://github.com/daneden/animate.css另外本篇文章也发表在了我的个人主页，欢迎来查看https://zzzmh.cn/single?id=59