Animate.css跨瀏覽器的 css3 動(dòng)畫庫(kù)
Animate.css 是一個(gè)有趣的，跨瀏覽器的 css3 動(dòng)畫庫(kù)，內(nèi)置了很多典型的 css3 動(dòng)畫，兼容性好使用方便。
安裝
使用 npm 安裝：
$ npm install animate.css --save
或者使用 Yarn 安裝：
$ yarn add animate.css
將其導(dǎo)入文件：
import 'animate.css';
或者使用 CDN 將其直接添加到網(wǎng)頁(yè)：
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>
基本用法
安裝 Animate.css 后，將類animate__animated與任何動(dòng)畫名稱一起添加到元素（不要忘記animate__前綴?。?/span>
<h1 class="animate__animated animate__bounce">An animated element</h1>
使用@keyframes
可以直接使用提供的動(dòng)畫keyframes。它提供了一種靈活的方式來將 Animate.css 用于當(dāng)前的項(xiàng)目，而無需重構(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! */ }
請(qǐng)注意，某些動(dòng)畫依賴于animation-timing動(dòng)畫類上設(shè)置的屬性。
評(píng)論
圖片
表情