---
title: 微动画
date: 2023-05-28 16:17:38
permalink: /pages/plugin/animation
article: false
---
## 微动画
1. 加上类名 `animation-fade|...` 即可实现动画
2. 加上类名 `animation-reverse` 反向动画
3. 延迟动画加上 style `animation-delay: 1s`
```css
.animation-fade /* 淡入 */
.animation-scale-up /* 放大 */
.animation-scale-down /* 缩小 */
.animation-slide-top /* 从上向下滑动 */
.animation-slide-bottom /* 从下向上滑动 */
.animation-slide-left /* 从左向右滑动 */
.animation-slide-right /* 从右向左滑动 */
.animation-shake /* 摇动 */
```
## gif动画
1. 看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来
```html
```