7.1 萬(wàn) Star！超實(shí)用，60 多種動(dòng)畫效果的 CSS 庫(kù)
【導(dǎo)語(yǔ)】：animate.css 是一個(gè)有趣的，跨瀏覽器的CSS3 動(dòng)畫庫(kù)。
簡(jiǎn)介
animate.css 是一個(gè)有趣的，跨瀏覽器的 css3 動(dòng)畫庫(kù)，兼容性好，使用方便。它預(yù)設(shè)了抖動(dòng)、閃爍、彈跳、翻轉(zhuǎn)、旋轉(zhuǎn)、淡入淡出等多達(dá) 60 多種動(dòng)畫效果，幾乎包含了所有常見的動(dòng)畫效果。
animate.css 基于 CSS3，只兼容支持 CSS3 animate 屬性的瀏覽器，IE10+、Firefox、Chrome、Opera、Safari。
項(xiàng)目地址是：
https://github.com/animate-css/animate.css
安裝
使用 npm 安裝：
$ npm install animate.css --save
使用 yarn 安裝：
$ yarn add animate.css
使用 CDN 直接引入：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
簡(jiǎn)單使用
基本用法。安裝 animate.css 后，將以下屬性添加到中即可完成動(dòng)畫效果的創(chuàng)建。
<h1 class="animate__animated animate__bounce">An animated element</h1>
自定義屬性。使用自定義屬性來定義動(dòng)畫持續(xù)時(shí)間、延遲，這使得它非常靈活，當(dāng)需要更改動(dòng)畫持續(xù)時(shí)間的時(shí)間，只需要為全局或本地設(shè)置一個(gè)新值。
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* This changes all the animations globally */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
同時(shí)自定義屬性還可以動(dòng)態(tài)更改所有時(shí)間受限的屬性，可以通過 JS 腳本動(dòng)態(tài)修改。
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');
延遲效果：可以直接在元素的 class 屬性上添加延遲效果：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
// animate.css 提供了這些延遲屬性：
class 默認(rèn)延遲時(shí)間
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s
// 也可以通過 --animate-delay 屬性進(jìn)行自定義：
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}
動(dòng)畫速度：可以通過添加這些 class 來控制動(dòng)畫的速度：
<div class="animate__animated animate__bounce animate__faster">Example</div>
// 速度的 class 包括這些：
class 默認(rèn)速度
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
// 可以通過 --animate-duration 全局或本地屬性自定義動(dòng)畫時(shí)間：
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
}
循環(huán)效果：可以通過添加這些 class 來控制動(dòng)畫的循環(huán)次數(shù)：
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
// 可供選擇的 class 有：
class 循環(huán)次數(shù)
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite 無(wú)限循環(huán)
// 類似的，也可以自定義循環(huán)次數(shù)：
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
}
最后，來看看 animate.css 的一些效果：
- EOF -
更多優(yōu)秀開源項(xiàng)目（點(diǎn)擊下方圖片可跳轉(zhuǎn)）
開源前哨
日常分享熱門、有趣和實(shí)用的開源項(xiàng)目。參與維護(hù)10萬(wàn)+star 的開源技術(shù)資源庫(kù)，包括：Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET 等
關(guān)注后獲取
回復(fù) 資源 獲取 10萬(wàn)+ star 開源資源
分享、點(diǎn)贊和在看
支持我們分享更多優(yōu)秀開源項(xiàng)目，謝謝！
評(píng)論
圖片
表情