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

类名InDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUpheartBeat大功告成，刷新页面即可查看动画效果基本用法就是这些官方还给出了一些进阶用法如下二、进阶用法动态调用动画的Javascript例子functionanimateCss(element,animationName,callback){constnode=document.querySelector(element)node.classList.add('animated',animationName)functionhandleAnimationEnd(){node.classList.remove('animated',animationName)node.removeEventListener('animationend',handleAnimationEnd)if(typeofcallback==='function')callback()}node.addEventListener('animationend',handleAnimationEnd)}3.Onthebasisoftheofficialexample,afteraslightmodification,sincetheofficialexampleusesquerySelector,onlythefirstelementthatmeetstherequirementswillbeselected.而且持续时间只有慢（2s）、慢（3s）、快（800ms）、快（500ms），所以我稍微修改了一下，仍然使用原生JS语法（ES6的一部分），其中selector元素改为select所有满足要求的元素添加times参数，可以是2000ms或者2s/***element:selector比如#id|类|div*animationName：动画名称参考animate.css官网如fadeIn*times：时长如200ms|2s*callback:回调函数*/functionanimateCss(element,animationName,times,callback){constnodes=document.querySelectorAll(element)nodes.forEach((node=>{if(times)node.style.setProperty('animation-duration',times,'important');node.classList.add('animated',animationName)functionhandleAnimationEnd(){node.classList.remove('animated',animationName)node.removeEventListener('animationend',handleAnimationEnd)if(typeofcallback==='function')callback()}node.addEventListener('animationend',handleAnimationEnd)}))}示例animateCss('.post','pulse');animateCss('.post','脉冲','200ms');animateCss('.post','脉冲','200ms',function(){//dosomething});Animate.css官网https://daneden.github.io/animate.css/https://github.com/daneden/animate.css另外这篇文章也是发表在我的个人主页，欢迎查看https://zzzmh.cn/single?id=59