animate.css動畫效果的 CSS 庫
阿新 • • 發佈：2021-09-01
簡介
animate.css 是一個有趣的，跨瀏覽器的 css3 動畫庫，相容性好，使用方便。它預設了抖動、閃爍、彈跳、翻轉、旋轉、淡入淡出等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。
animate.css 基於 CSS3，只相容支援 CSS3 animate 屬性的瀏覽器，IE10+、Firefox、Chrome、Opera、Safari。
專案地址是：
https://github.com/animate-css/animate.css
安裝
- 使用 npm 安裝：
$npminstallanimate.css--save
- 使用 yarn 安裝：
$yarnaddanimate.css
- 使用 CDN 直接引入：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
簡單使用
- 基本用法。安裝 animate.css 後，將以下屬性新增到中即可完成動畫效果的建立。
<h1class="animate__animatedanimate__bounce">Ananimatedelement</h1>
- 自定義屬性。使用自定義屬性來定義動畫持續時間、延遲，這使得它非常靈活，當需要更改動畫持續時間的時間，只需要為全域性或本地設定一個新值。
/*Thisonlychangesthisparticularanimationduration*/
.animate__animated.animate__bounce{
--animate-duration:2s;
}
/*Thischangesalltheanimationsglobally*/
:root{
--animate-duration:800ms;
--animate-delay:0.9s;
}
- 同時自定義屬性還可以動態更改所有時間受限的屬性，可以通過 JS 指令碼動態修改。
//Allanimationswilltaketwicethetimetoaccomplish
document.documentElement.style.setProperty('--animate-duration','2s');
//Allanimationswilltakehalfthetimetoaccomplish
document.documentElement.style.setProperty('--animate-duration','.5s');
- 延遲效果：可以直接在元素的 class 屬性上新增延遲效果：
<divclass="animate__animatedanimate__bounceanimate__delay-2s">Example</div>
// animate.css 提供了這些延遲屬性：
class預設延遲時間
animate__delay-2s2s
animate__delay-3s3s
animate__delay-4s4s
animate__delay-5s5s
//也可以通過--animate-delay 屬性進行自定義：
/*Alldelayclasseswilltake2xlongertostart*/
:root{
--animate-delay:2s;
}
/*Alldelayclasseswilltakehalfthetimetostart*/
:root{
--animate-delay:0.5s;
}
- 動畫速度：可以通過新增這些 class 來控制動畫的速度：
<divclass="animate__animatedanimate__bounceanimate__faster">Example</div>
//速度的 class 包括這些：
class預設速度
animate__slow2s
animate__slower3s
animate__fast800ms
animate__faster500ms
//可以通過--animate-duration 全域性或本地屬性自定義動畫時間：
/*Allanimationswilltaketwiceaslongtofinish*/
:root{
--animate-duration:2s;
}
/*Onlythiselementwilltakehalfthetimetofinish*/
.my-element{
--animate-duration:0.5s;
}
- 迴圈效果：可以通過新增這些 class 來控制動畫的迴圈次數：
<divclass="animate__animatedanimate__bounceanimate__repeat-2">Example</div>
//可供選擇的 class 有：
class迴圈次數
animate__repeat-11
animate__repeat-22
animate__repeat-33
animate__infinite無限迴圈
//類似的，也可以自定義迴圈次數：
/*Theelementwillrepeattheanimation2x
It'sbettertosetthispropertylocallyandnotgloballyor
youmightendupwithamessysituation*/
.my-element{
--animate-repeat:2;
}
- 最後，來看看 animate.css 的一些效果：