diff --git "a/\351\231\206\346\245\232\347\233\210/20241028\345\212\250\347\224\273.md" "b/\351\231\206\346\245\232\347\233\210/20241028\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..88f681d92724061a89787658d61e5a870dc760e4
--- /dev/null
+++ "b/\351\231\206\346\245\232\347\233\210/20241028\345\212\250\347\224\273.md"
@@ -0,0 +1,61 @@
+# 动画
+动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
+## 定义动画的步骤
+1、 通过@keyframes定义动画；
+2、 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+3、 在指定元素里，通过 `animation` 属性调用动画
+
+之前我们在js中定义一个函数的时候，是先定义，再调用
+```
+js定义函数：
+    function fun（）{ 函数体 }
+调用：
+    fun（）；
+```
+
+同样，我们在CSS3中定义动画的时候，也是先定义，再调用：
+```
+定义动画：
+    @keyframes 动画名{
+        from{初始状态}
+        to{结束状态}
+    }
+调用：
+    animation：动画名称 结束时间
+```
+
+其中，animation属性的格式如下：
+```
+animation：定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行 (infinite表示无限次)
+```
+可以看出，这里的animation是综合属性，接下来，我们把这个综合属性拆开
+
+## 动画属性
+* 动画名称：
+> animation-name：move
+
+* 执行一次动画的持续时间：
+> animation-duration：4s
+
+**注意：以上两个属性，是必选项，且顺序固定**
+
+* 动画的执行次数：
+> animation-iteration-count：1   //iteration的含义表示迭代
+**注意：属性值infinite表示无数次**
+
+* 动画的方向：
+> animation-direction：alternate
+**属性normal，alternate反向**
+
+* 动画延迟执行：
+> animation-delay:1s
+
+* 设置动画结束时，盒子的状态：
+> animation-fill-mode:forwards
+**属性值：forwards：保持动画结束后的状态（默认），backwards：动画结束后回到最初的状态**
+
+* 运动曲线
+> animation-timing-function：ease-in  //属性值可以是：linear ease-in-out steps()等
+**注意：如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行**
+
+