animate.js下载实现页面滚动时animate.css动画特效

　　animate.css动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果。几乎包含了所有常见的动画效果，但在使用上与我们一般的实际项目有些出入，如果达到我们想要的效果需要添加JS代码来配合实现。我们在网站建设上使用animate.css动画库的情况是：当鼠标滑过某一DIV时，内部相应的模块执行动画播放。为此青锋建站专业开发了JS调用animate.css动画库的万能调用代码，使用非常方便，不需要JS开发能力也可以方便使用，但是只适用于鼠标滑过时，内部执行动画。

最新版本已经发布，提升了性能和兼容性，请下载最新版本，上次更新时间为2019-02-28，本次更新时间为2019-07-26，请关注后续更新。

animate.css动画库万能调用代码介绍

　　animate.css动画库万能调用代码可以实现当模块滑过某一DIV或块时，内部相应的设置有动画类名的标签执行动画。只需要添加CSS类名，不需要JS开发。由青锋建站前端开发团队设计功能，免费开发给大家，只需要关注青锋建站的百度百家号就可以免费获取代码。
可以实现两种效果
A页面加载完成，鼠标滑过执行动画一次，默认下载完使用就是这种效果。
B页面加载完成，鼠标滑过执行动画一次，鼠标离开，再次进行仍然可以执行，类似CSS伪类的效果，只需要把animate.js里的注释部分去掉就可以。这种效果通过CSS伪类也可以实现。当然这里不做介绍。
兼容性分析
兼容性以下浏览器上的相应版本或以上版本：firfox 3.0/ie 9.0/chrome 4.0/safari 3.1/opera 9.5。
animate.css动画库万能调用代码下载地址animate.js，下载码获取方式：
关注青锋建站微信公众号，关注后－在文本输入框中输入：（animate.js）即可获得下载码。

animate.css万能调用代码使用方法

　　animate.css万能调用代码傅非常简单，只需要给外层标签添加类名(qingfengjianzhan)，再给内部标签添加(qf-动画名称)为名称的CSS类名就可以。例如：以下示例代码就可以实现相应的功能，当鼠标滑过<div class="qingfengjianzhan">时，里面的动画就会触发执行。
　　<div class="qingfengjianzhan">
　　　　<div class="qf-slideInLeft">
　　　　</div>
　　　　<div class="qf-slideInRight">
　　　　</div>
　　</div>
　　
　　！注意：默认下载的animate.js里已经将鼠标移出某个块儿时onmouseout的注册事件去掉，如果想鼠标进入执行动画，鼠标离开后再次进入仍然执行动画的效果，只需要把animate.js里的注释部分去掉就可以。

页面滚动时实现animate.css动画的其他方法

　　使用wow.js可以实现同样的功能，wow.js是专业的页面滚动特效JS功能集合。而animate.js只是为了把问题简单化，给初学者使用，在性能上由于使用了循环，性能上稍逊，最新版本已经改善这一情况。我们不求做得多好，只求最简单的方法来实现这一功能。
　　青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，专业做优化型网站，为企业构建营销平台。animate.js由青锋建站团队开发，复制，散发请注明来源。

转载请注明来源网址：青锋建站-http://www.sjzphp.com/code/animate_666.html