fix

blog/front-end-combat/animation.md

+# 动画 animation
+
+过渡 vs 动画
+
+- 过渡：用于两个状态变化过程
+- 动画：实现多个状态间的变化过程，动画过程可控
+
+动画
+
+- 动画的本质：快速切换大量图片时在人脑中行成的具有连续性的画面
+- 构成动画的最小单元：帧或动画帧
+
+实现步骤：
+
+1. 定义动画
+
+```css
+/* 定义两种状态 */
+@keyframes 动画名称 {
+  from {
+  }
+  to {
+  }
+}
+
+/* 定义多种状态 */
+/* 百分比表示动画总时长的占比 */
+@keyframes 动画名称 {
+  0% {
+  }
+  10% {
+  }
+  50% {
+  }
+  100% {
+  }
+}
+```
+
+2. 使用动画
+
+```css
+animation: 动画名称 动画花费时长;
+```
+
+示例:
+
+[](demo/animation-1.html ':include :type=code')
+
+[](demo/animation-1.html ':include height=70')
+
+## 动画属性
+
+```css
+animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
+```
+
+注意：
+
+- 动画名称 和 动画时长必须赋值
+- 取值不分先后顺序
+- 如果有 2 个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
+
+示例:
+
+[](demo/animation-2.html ':include :type=code')
+
+[](demo/animation-2.html ':include height=420')
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=45&spm_id_from=pageDriver

blog/front-end-combat/demo/animation-1.html

+<style>
+    .box {
+        width: 50px;
+        height: 50px;
+        background-color: skyblue;
+    }
+
+    .box:hover {
+        /* 使用动画 */
+        animation: change-width 2s;
+    }
+
+    /* 定义动画 */
+    @keyframes change-width {
+        from {
+            width: 50px;
+        }
+
+        to {
+            width: 200px;
+        }
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

blog/front-end-combat/demo/animation-2.html

+<style>
+    .box {
+        width: 50px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        background-color: skyblue;
+    }
+
+    /* 基本动画 */
+    .box-basic {
+        animation: change-width 2s;
+    }
+
+    /* 匀速动画 */
+    .box-linear {
+        animation: change-width 2s linear;
+    }
+
+    /* 分步动画 */
+    .box-steps {
+        animation: change-width 2s steps(3);
+    }
+
+    /* 延迟动画 */
+    .box-delay {
+        animation: change-width 2s 2s;
+    }
+
+    /* 重复3次 */
+    .box-repeat {
+        animation: change-width 2s 3;
+    }
+
+    /* 无限循环 */
+    .box-infinite {
+        animation: change-width 2s infinite;
+    }
+
+    /* 反向动画 */
+    .box-alternate {
+        animation: change-width 2s infinite alternate;
+    }
+
+    /* 动画停留在最初状态 backwards */
+    /* 动画停留在最后状态 forwards */
+    .box-forwards {
+        animation: change-width 2s forwards;
+    }
+
+    /* 定义动画 */
+    @keyframes change-width {
+        from {
+            width: 50px;
+        }
+
+        to {
+            width: 200px;
+        }
+    }
+</style>
+
+
+<div class="box box-basic">basic</div>
+<div class="box box-linear">linear</div>
+<div class="box box-steps">steps</div>
+<div class="box box-delay">delay</div>
+<div class="box box-repeat">repeat</div>
+<div class="box box-infinite">infinite</div>
+<div class="box box-alternate">alternate</div>
+<div class="box box-forwards">forwards</div>
\ No newline at end of file

blog/front-end-combat/index.md

@@ -6,7 +6,9 @@
 
 2. [平面转换 transform](blog/front-end-combat/transform.md)
 
-3. [空间转换 transform](blog/front-end-combat/transform-3d.md)
+3. [空间转换 transform 3d](blog/front-end-combat/transform-3d.md)
+
+4. [动画 animation](blog/front-end-combat/animation.md)
 
 - css3 平面、渐变、动画属性
 - Flex 布局

blog/front-end-combat/transform-3d.md

@@ -110,4 +110,11 @@ perspective: 像素值; /* (800-1200) */
 transform-style: preserve-3d;
 ```
 
-https://www.bilibili.com/video/BV1xq4y1q7jZ?p=39&spm_id_from=pageDriver
+# 空间缩放 scale
+
+```css
+transform: scaleX(x);
+transform: scaleY(y);
+transform: scaleZ(z);
+transform: scale3d(x, y, z);
+```