-
-
-
-
-
-
-
+
+
```html
-
+
+
+
+
+
+
+
-
+
```html
```
diff --git a/lib/utilities/docs/utilities/effects/filter.md b/lib/utilities/docs/utilities/effects/filter.md
index efe040fe50..6898ff39e8 100755
--- a/lib/utilities/docs/utilities/effects/filter.md
+++ b/lib/utilities/docs/utilities/effects/filter.md
@@ -1,103 +1,123 @@
-# Filter函数
-
-## 效果展示
-
-### 高斯模糊
-
-通过`blur-*`给图片添加高斯模糊样式。
-
-
-
@@ -62,18 +60,18 @@
```
-### 弹跳
+## 弹跳
-使用`bounce`给元素添加弹跳动画
+使用 `animate-bounce` 给元素添加弹跳动画。
- 
-
+
-### 灰度和反色
+## 灰度和反色
-通过`grascale`将图像转为灰度图像；通过`invert`将图像设置为反色。
+通过 `grayscale` 将图像转为灰度图像；通过 `invert` 将图像设置为反色。
-
-
- {{item}}
+# CSS 滤镜
+
+## 高斯模糊
+
+通过 `blur-*` 给图片添加高斯模糊样式。
+
+
+
+
+
+
-
-
+
+## 形状阴影
+通过 `drop-shadow-*` 给元素设置形状阴影效果，通常用在图片上。
-### 图像阴影
-
-通过`dsd-*`给图像设置阴影效果。
-
-
-
- {{item}}
+
+
+
+
+
-
-
+
-```html
- ![]()
-```
+## 背景模糊
+
+通过 `backdrop-blur-*` 添加覆盖区域模糊样式。
+
+
+
-### 覆盖区域模糊
+## 禁用滤镜
-通过`bg-blur-*`添加覆盖区域模糊样式。
+通过 `filter-none` 来禁用之前添加的滤镜效果。
-
-
+
+
+
-```html
-
-
-
-
diff --git a/lib/utilities/docs/utilities/effects/opacity.md b/lib/utilities/docs/utilities/effects/opacity.md
index ae12519124..12cc3e84f1 100755
--- a/lib/utilities/docs/utilities/effects/opacity.md
+++ b/lib/utilities/docs/utilities/effects/opacity.md
@@ -1,19 +1,23 @@
-# 不透明度
+# 透明度
-使用`opacity-*`设置元素的不透明度
+使用 `opacity-*` 设置元素的透明度。
-
-
- {{item}}
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
- ZUI3
- {{item}}
-
+
- ![]()
-
-```
-
diff --git a/lib/utilities/docs/utilities/effects/flip.md b/lib/utilities/docs/utilities/effects/flip.md
deleted file mode 100644
index 474ac2ebaf..0000000000
--- a/lib/utilities/docs/utilities/effects/flip.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# 翻转
-
-添加`flip-*`给元素添加翻转样式
-
-
- ZUI3
-
-
-
-
- ZUI
-
- {{item}}
-
-
+
diff --git a/lib/utilities/docs/utilities/effects/scale.md b/lib/utilities/docs/utilities/effects/scale.md
deleted file mode 100644
index 8ae78029f1..0000000000
--- a/lib/utilities/docs/utilities/effects/scale.md
+++ /dev/null
@@ -1,25 +0,0 @@
-
-# 缩放
-
-添加`scale-*`设置元素的缩放
-
-
-
-
-
diff --git a/lib/utilities/docs/utilities/effects/shadow.md b/lib/utilities/docs/utilities/effects/shadow.md
index bc66ba5b29..8a30533898 100755
--- a/lib/utilities/docs/utilities/effects/shadow.md
+++ b/lib/utilities/docs/utilities/effects/shadow.md
@@ -1,20 +1,22 @@
-# 盒阴影
+# 阴影
## 阴影大小
-使用`shadow-*`设置阴影大小。
+使用 `shadow-*` 设置不同大小的阴影。
-
-
-
-
+{{item}}
-
+
+
+
+
-
-
-
-
-
- {{item}}
-
-
+
diff --git a/lib/utilities/docs/utilities/effects/transition.md b/lib/utilities/docs/utilities/effects/transition.md
new file mode 100644
index 0000000000..74e5210825
--- /dev/null
+++ b/lib/utilities/docs/utilities/effects/transition.md
@@ -0,0 +1,97 @@
+# 过渡动画
+
+## 过渡属性
+
+通过 `transition-*` 为元素应用过渡动画，并制定过渡目标属性。
+
+
+
+
+## 过渡时间
+
+通过 `duration-*` 为元素应用过渡动画时间。
+
+
+
+
+## 渐隐渐显
+
+通过 `fade-*` 来为元素设置渐隐渐显动画效果，默认元素不显示，通过控制添加 `in` 类让元素渐显。
+
+
+
+
+
+
+
-
-
+{{item}}
-
+
+
+
+
+
+
+
+
+
+ {{item.title}}
+
+