我們可以在集成Animate.css來改善界面的用戶體驗，省掉大量手寫css動畫的時間。
官網(wǎng)：Animate.css

使用

1、安裝依賴

npm install animate.css --save

2、引入依賴

import 'animate.css';

3、在項目中使用
在class類名上animate__animated是必須的，animate__flipInX為你應(yīng)用的動畫效果

<div class="animate__animated animate__flipInX">動畫</div>

---

定義動畫的持續(xù)時間、延遲和迭代

Animate.css 使用自定義屬性（也稱為 CSS 變量）來定義動畫的持續(xù)時間、延遲和迭代。

/* This only changes this particular animation duration */
.animate__animated.animate__flipInX {--animate-duration: 2s;
}

這里就可以將animate__flipInX動畫的持續(xù)時間修改為2s

定義全局動畫的持續(xù)時間、延遲和迭代

/* This only changes this particular animation duration */
:root {--animate-duration: 5s !important;
}

也可以直接在標簽上定義延遲、持續(xù)時間等效果

 <div class="animate__animated animate__flipInX animate__delay-2s">動畫</div>

在這里animate__delay-2s動畫延遲了2s

---

不影響自定義的css動畫

你也可以自定義css動畫效果覆蓋animate.css的動畫

 <div class="mouse_chunk animate__animated animate__flipInX animate__delay-2s">動畫</div>
.mouse_chunk {width: 100px;height: 50px;animation: custom 1s;}@keyframes custom {0%{width: 100px;}100%{width: 150px;}}

---

如果覺得這篇文章對你有幫助，歡迎點贊👍、收藏💖、轉(zhuǎn)發(fā)?哦~