概念：不论是什么用途都是用 CSS 实现平滑过渡的一种方式
优先使用
transform和opacity属性实现动画，他们可以触发 GPU 加速，避免重排（reflow）和重绘（repaint）
关键帧
关键帧（@keyframes） 是用于定义动画在不同阶段的样式状态
/* 定义关键帧 */
@keyframes 动画名称 {
关键帧选择器 {
属性: 值;
}
}
/* 绑定动画 */
animation: 动画名称 ...;关键帧选择器
百分比（如 0%、50%、100%）：定义动画在不同进度的样式
关键字：from（等价于 0%）、to（等价于 100%）
动画属性
| 属性 | 作用 | 可选值 |
|---|---|---|
animation-name | 指定要使用的关键帧名称 | 自定义名称，或 none（无动画） |
animation-duration | 动画完成一个周期的时间 | 时间值（如 2s、500ms），默认 0s（无动画） |
animation-timing-function | 动画的速度曲线 | ease（默认，慢 - 快 - 慢）linear（匀速）ease-in（慢开始）ease-out（慢结束）ease-in-out（慢开始慢结束）cubic-bezier(n,n,n,n)（自定义曲线） |
animation-delay | 动画开始前的延迟时间 | 时间值（如 1s、-500ms，负值表示立即从中间状态开始），默认 0s |
animation-iteration-count | 动画播放次数 | 数字（如 3）、infinite（无限循环），默认 1 |
animation-direction | 动画播放方向 | normal（默认，正向）reverse（反向）alternate（正向 - 反向交替）alternate-reverse（反向 - 正向交替） |
animation-fill-mode | 动画执行前后的样式状态 | none（默认，动画结束后回到初始样式）forwards（保持最后一帧样式）backwards（动画延迟期间应用第一帧样式）both（同时应用 forwards 和 backwards） |
animation-play-state | 控制动画播放或暂停 | running（默认，播放）paused（暂停） |
可以简写为：animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
一个元素可以应用多个动画中间只需要使用逗号分隔，如：animation: [动画一] 2s forwards, [动画二] 1s forwards;
JS事件
获取到动画元素的实例后可监听以下事件
| 事件名 | 触发时机 |
|---|---|
animationstart | 动画开始时触发 |
animationend | 动画结束时触发 |
animationiteration | 动画每次循环结束时触发 |
过渡
过渡（transition）允许元素在两个状态之间平滑过渡（从 “起始样式” 到 “结束样式”），需要触发条件（如鼠标悬停、点击、类名变化等）。与 @keyframes 不同，transition 仅定义 “开始” 和 “结束” 两个状态，无法控制中间帧
| 属性 | 作用 | 可选值 |
|---|---|---|
transition-property | 指定需要过渡的 CSS 属性 | 具体属性名（如 width、opacity）all（所有可过渡属性）none（无过渡） |
transition-duration | 过渡完成的时间 | 时间值（如 0.3s、500ms），默认 0s（无过渡） |
transition-timing-function | 过渡的速度曲线 | 与 animation-timing-function 一致 |
transition-delay | 过渡开始前的延迟时间 | 时间值（如 0.5s、-200ms），默认 0s |
可以简写为：transition: [property] [duration] [timing-function] [delay];
如果要手动指定多个属性过度的话中间使用逗号分隔
触发方式
transition 本身不会自动播放，需要通过以下方式触发：
- 伪类触发：
:hover、:focus、:active等 - 类名变化：通过 JavaScript 动态添加 / 移除类
- 媒体查询：屏幕尺寸变化时触发
JS事件
获取到动画实例后监听 transitionend 事件，他会在事件过渡完成后触发
转换
转换（transform）用于对元素进行几何变换的属性，可实现移动、旋转、缩放、倾斜等效果，且仅改变元素的视觉呈现，不改变其在文档流中的原始位置。支持多个变换函数组合使用（空格分隔，按顺序执行）
参数单位：
- 长度单位：如
px、em、rem（例如translateX(100px)表示向右移动 100px） - 百分比：相对于元素自身宽度计算（例如
translateX(50%)表示向右移动自身宽度的 50%） - 负值：向左移动（例如
translateX(-50px)表示向左移动 50px）
平移（Translation）
| 函数 | 作用 | 示例 |
|---|---|---|
translateX(x) | 水平移动 | translateX(100px) |
translateY(y) | 垂直移动 | translateY(50px) |
translate(x, y) | 简写：同时水平 + 垂直移动 | translate(100px, 50px) |
translateZ(z) | 沿 Z 轴（垂直屏幕方向）移动 | translateZ(100px)（向用户靠近 100px） |
translate3d(x, y, z) | 简写：3D 空间中移动 | translate3d(100px, 50px, 100px) |
旋转（Rotation）
| 函数 | 作用 | 示例 |
|---|---|---|
rotate(angle) | 绕中心点旋转（单位：deg/turn/rad） | rotate(45deg)（顺时针 45°）rotate(0.5turn)（旋转半圈） |
rotateX(angle) | 绕 X 轴（水平轴）旋转 | rotateX(45deg)（顶部向后倾斜 45°） |
rotateY(angle) | 绕 Y 轴（垂直轴）旋转 | rotateY(45deg)（右侧向后旋转 45°） |
rotateZ(angle) | 绕 Z 轴（垂直屏幕轴）旋转 | 等价于 rotate(angle) |
rotate3d(x, y, z, angle) | 自定义 3D 旋转轴 | rotate3d(1, 1, 0, 45deg)（沿对角线旋转 45°） |
缩放（Scaling）
| 函数 | 作用 | 示例 |
|---|---|---|
scaleX(x) | 仅水平缩放 | scaleX(1.5)（水平放大 1.5 倍） |
scaleY(y) | 仅垂直缩放 | scaleY(0.8)（垂直缩小到 80%） |
scale(x, y) | 简写：同时水平 + 垂直缩放 | scale(1.5, 0.8) |
scale(n) | 简写：水平 + 垂直等比缩放 | scale(1.5)（整体放大 1.5 倍） |
scaleZ(z) | 沿 Z 轴缩放 | scaleZ(2)（Z 轴方向厚度加倍） |
scale3d(x, y, z) | 简写：3D 空间中缩放 | scale3d(1.5, 1.5, 2) |
倾斜（Skewing）
| 函数 | 作用 | 示例 |
|---|---|---|
skewX(angle) | 沿水平轴倾斜 | skewX(20deg)（顶部向右倾斜 20°） |
skewY(angle) | 沿垂直轴倾斜 | skewY(10deg)（左侧向上倾斜 10°） |
skew(x-angle, y-angle) | 简写：同时水平 + 垂直倾斜 | skew(20deg, 10deg) |
矩阵变换（Matrix）
| 函数 | 作用 |
|---|---|
matrix(a, b, c, d, tx, ty) | 2D 变换矩阵（底层实现） |
matrix3d(...) | 3D 变换矩阵（4x4=16 个参数，底层实现） |
辅助属性
origin
变换基点（transform-origin）语法：transform-origin: x-axis y-axis z-axis;
x-axis（水平基点）取值：
- 关键字：
left（左边界）、center（水平中心，默认）、right（右边界） - 长度值：
px/em/rem等，相对于元素左边界的偏移 - 百分比：相对于元素自身宽度计算，
0%= 左边界，100%= 右边界
y-axis（垂直基点）取值：
- 关键字：
top（上边界）、center（垂直中心，默认）、bottom（下边界） - 长度值：
px/em/rem等，相对于元素上边界的偏移 - 百分比：相对于元素自身高度计算，
0%= 上边界，100%= 下边界
z-axis（3D 深度基点，仅 3D 变换生效）取值：仅支持px等长度值（不能用百分比 / 关键字），定义基点在 Z 轴的偏移，正值向观察者靠近，负值远离
默认值：
50% 50% 0（元素正中心，Z 轴无偏移）；必须配合transform属性使用，单独设置无任何效果
style
3D 空间渲染规则（transform-style）语法：transform-style: flat | preserve-3d;
| 属性值 | 核心作用 | 效果说明 |
|---|---|---|
flat（默认） | 扁平化渲染 | 子元素的 3D 变换会被压平在父元素的平面上，不保留 3D 层级，所有子元素都在父元素的 2D 平面内渲染 |
preserve-3d | 保留 3D 空间 | 子元素的 3D 变换会在同一个 3D 场景中生效，保留真实的 3D 层级和遮挡关系，是实现 3D 效果的核心属性 |
核心规则
该属性必须设置在父元素上，作用于它的直接子元素
以下属性会直接导致
preserve-3d失效，绝对不能同时用在设置了该属性的元素上：overflow: hidden / auto / scrollopacity值小于 1filter任何非none的值clip-path/mask-image
该属性只影响直接子元素，若要深层嵌套的子元素也保留 3D 效果，需要逐层给父元素设置
preserve-3d
perspective
透视距离（perspective）语法：perspective: none | length;
| 属性值 | 核心作用 | 效果说明 |
|---|---|---|
none（默认） | 无透视效果 | 所有 3D 变换都会被扁平化，没有近大远小的视觉效果，相当于正交投影 |
<length> 正数长度值 | 定义观察者到屏幕的距离 | 仅支持px/em等正数长度值（绝对不能用百分比） |
两种写法：
| 写法 | 作用范围 |
|---|---|
父元素设置perspective属性 | 给容器内所有子元素设置统一的透视视角，所有子元素共享同一个观察点 |
子元素transform里写perspective()函数 | 给单个元素单独设置透视，每个元素有独立的观察点 |
backface-visibility
背面可见性（backface-visibility）语法：backface-visibility: visible | hidden;
用于为定义元素旋转到背面时，是否对观察者可见
| 属性值 | 效果说明 |
|---|---|
visible（默认） | 元素背面始终可见，旋转 180° 后会看到镜像内容 |
hidden | 元素背面不可见，旋转到背面朝向观察者时，元素会被隐藏 |
注意事项：必须设置在需要翻转的子元素上
透明度
opacity 用来控制元素透明度的属性，取值范围为 0（完全透明）到 1（完全不透明）。特点就是即使是完全透明但是还是会占据文档流空间，并且仍可正常交互
父元素设置 opacity 后，子元素会继承该透明度（无法通过子元素设置更高的透明度覆盖）