diff --git "a/\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md" "b/\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ab65091e208d9740915812df8589e71661e7d6d8
--- /dev/null
+++ "b/\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md"
@@ -0,0 +1,243 @@
+# CSS3属性详解：动画详解
+主要内容：
+
+- 过渡：transition
+
+- 2D 转换 transform
+
+- 3D 转换 transform
+
+- 动画：animation
+
+## 过渡：transition
+
+`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。
+
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition 包括以下属性：
+
+- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。
+
+- `transition-duration: 1s;` 过渡的持续时间。
+
+- `transition-timing-function: linear;` 运动曲线。属性值可以是：
+ - `linear` 线性
+ - `ease` 减速
+ - `ease-in` 加速
+ - `ease-out` 减速
+ - `ease-in-out` 先加速后减速
+
+- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成**综合属性**：
+
+## 2D 转换
+
+**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+- 2D转换包括：缩放、移动、旋转。
+
+我们依次来讲解。
+
+### 1、缩放：`scale`
+
+格式：
+
+```javascript
+ transform: scale(x, y);
+
+ transform: scale(2, 0.5);
+```
+
+### 2、位移：translate
+
+格式：
+
+
+```javascript
+ transform: translate(水平位移, 垂直位移);
+
+ transform: translate(-50%, -50%);
+```
+
+### 3、旋转：rotate
+
+格式：
+
+```javascript
+ transform: rotate(角度);
+
+ transform: rotate(45deg);
+```
+
+# 练习
+
+## 效果图
+
+
+
+## 代码
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+