7.1 萬 Star！超實用，60 多種動畫效果的 CSS 庫

時間 2021-06-15

標籤 css css3 git github ajax npm 瀏覽器動畫 this code 欄目 CSS 简体版

原文原文鏈接

【導語】：animate.css 是一個有趣的，跨瀏覽器的CSS3 動畫庫。css

簡介

animate.css 是一個有趣的，跨瀏覽器的 css3 動畫庫，兼容性好，使用方便。它預設了抖動、閃爍、彈跳、翻轉、旋轉、淡入淡出等多達 60 多種動畫效果，幾乎包含了全部常見的動畫效果。css3

animate.css 基於 CSS3，只兼容支持 CSS3 animate 屬性的瀏覽器，IE10+、Firefox、Chrome、Opera、Safari。git

項目地址是：github

https://github.com/animate-cs...ajax

安裝

使用 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 後，將如下屬性添加到中便可完成動畫效果的建立。

<h1 class="animate__animated animate__bounce">An animated element</h1>

自定義屬性。使用自定義屬性來定義動畫持續時間、延遲，這使得它很是靈活，當須要更改動畫持續時間的時間，只須要爲全局或本地設置一個新值。

/* 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;
}

同時自定義屬性還能夠動態更改全部時間受限的屬性，能夠經過 JS 腳本動態修改。

// 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               默認延遲時間
animate__delay-2s   2s
animate__delay-3s   3s
animate__delay-4s   4s
animate__delay-5s   5s

// 也能夠經過 --animate-delay 屬性進行自定義：
/* 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            默認速度
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;
}

循環效果：能夠經過添加這些 class 來控制動畫的循環次數：

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

// 可供選擇的 class 有：
class              循環次數
animate__repeat-1  1
animate__repeat-2  2
animate__repeat-3  3
animate__infinite  無限循環

// 相似的，也能夠自定義循環次數：
/* 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;
}