7.1 萬 Star！超實用，60 多種動畫效果的 CSS 庫
作者：佚名
animate.css 是一個有趣的，跨瀏覽器的CSS3 動畫庫。
簡介
animate.css 是一個有趣的，跨瀏覽器的 css3 動畫庫，兼容性好，使用方便。它預(yù)設(shè)了抖動、閃爍、彈跳、翻轉(zhuǎn)、旋轉(zhuǎn)、淡入淡出等多達(dá) 60 多種動畫效果，幾乎包含了所有常見的動畫效果。
animate.css 基于 CSS3，只兼容支持 CSS3 animate 屬性的瀏覽器，IE10+、Firefox、Chrome、Opera、Safari。
項目地址是：
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>
簡單使用
- 基本用法。安裝 animate.css 后，將以下屬性添加到中即可完成動畫效果的創(chuàng)建。
- <h1 class="animate__animated animate__bounce">An animated element</h1>
- 自定義屬性。使用自定義屬性來定義動畫持續(xù)時間、延遲，這使得它非常靈活，當(dāng)需要更改動畫持續(xù)時間的時間，只需要為全局或本地設(shè)置一個新值。
- /* 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;
- }
- 同時自定義屬性還可以動態(tài)更改所有時間受限的屬性，可以通過 JS 腳本動態(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)延遲時間
- 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;
- }
- 動畫速度：可以通過添加這些 class 來控制動畫的速度：
- <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 全局或本地屬性自定義動畫時間：
- /* 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 來控制動畫的循環(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 無限循環(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;
- }
責(zé)任編輯：張燕妮
來源：
知乎
