首頁 > 運動
【第一次釋出】animate怎麼讓元件旋轉animate。css動畫庫使用技巧分享
由 前端亦可行 發表于 運動2021-05-23
簡介css淡出基於Y軸360度旋轉Animate
animate怎麼讓元件旋轉
animate。css是一款強大且實用的css動畫庫，目前github的stars量69K以上
教程使用的是最新版本4。1。1
一、安裝
1、透過npm工具安裝
npm install animate。css ——save
2、html檔案直接匯入
github搜尋moment直接下載原始碼檔案包
二、使用
我分享一些在工作開發中使用頻率比較高的動畫效果，其它的效果大家可以在官網上檢視
1、引入css檔案
2、構造需要設定動畫的元素，加上class基礎類名“animate_animated”，如果需要什麼動畫效果再在這基本上加上對應的class動畫類名
Animate。css
3、常用效果
由大變小，向中間靠攏
Animate。css
由大變小，向中間靠攏
左右搖動，類似ios手機密碼輸錯時的提醒效果
Animate。css
左右搖動
淡入
Animate。css
淡入
淡出
Animate。css
淡出
基於Y軸360度旋轉
Animate。css
基於Y軸360度旋轉
基於Y軸旋轉淡出
Animate。css
基於Y軸旋轉淡出
旋轉進入
Animate。css
旋轉進入
旋轉出去
Animate。css
旋轉出去
從左滑入
Animate。css
從左滑入
向左滑出
Animate。css
向左滑出
覺得效果不錯的請幫忙加個關注點個贊，每天分享前端實用開發技巧
