一個(gè)國(guó)外的純 CSS 動(dòng)畫效果包，包含了一些日常最常使用的動(dòng)畫效果，為開發(fā)提供了很多便利。
目前已經(jīng)更新到 v4 版本，官方文檔在這里。
安裝和使用
安裝
使用 npm 安裝
$ npm install animate.css --save
使用 yarn 安裝
$ yarn add animate.css
或者直接使用 CDN
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
基本用法
在引入后，為元素添加 animate__animated 類，以及任何動(dòng)畫的名字（不要忘記 animate__ 前綴?。?/p>
<h1 class="animate__animated animate__bounce">An animated element</h1>
這樣就為 H1 標(biāo)簽添加了一個(gè)彈跳動(dòng)畫
使用 @keyframes
盡管庫提供了一些類來快速實(shí)現(xiàn)動(dòng)畫，但你也可以使用 關(guān)鍵幀 來構(gòu)建。
這提供了一種靈活的方式使用動(dòng)畫。 只需要修改css，而不必重構(gòu)你的HTML代碼。
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce;
/* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
CSS 自定義屬性（CSS變量）
從 v4 版本開始。 css使用自定義屬性(也稱為css變量)來控制動(dòng)畫的時(shí)間、延遲和互動(dòng)效果。
這使得 animate.css 變得非常靈活。需要改變一個(gè)動(dòng)畫時(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; }
公共類
延遲類
可以直接添加延遲在元素的class屬性，就像這樣:
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
后面的 Xs 可自定義秒數(shù)，以快速定義延遲秒數(shù)。
慢、更慢、快、更快，速度控制類
可以通過添加類來快速控制動(dòng)畫的速度，如下:
<div class="animate__animated animate__bounce animate__faster">Example</div>
faster 是可修改的，具體有這幾種：
slow --- 持續(xù) 2 秒
slower --- 持續(xù) 3 秒
fast --- 持續(xù) 800 毫秒
faster --- 持續(xù) 500 毫秒
暫無評(píng)論，快來評(píng)論吧!