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由青鋒建站團隊開發，復制，散發請注明來源。