From d1bc694afd428c04f3e1e3ef3a2f6898a203224d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=B5=A9=E5=86=89?= <3027237339@qq.com>
Date: Sun, 3 Nov 2024 21:34:34 +0800
Subject: [PATCH] 1028

---
 ...50\347\224\273\350\241\245\345\205\205.md" | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 "\351\273\204\346\265\251\345\206\211/20241028\347\254\224\350\256\260-\345\212\250\347\224\273\350\241\245\345\205\205.md"

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