企业官网建设流程全解析

直接说结论：CSS远不止"改颜色、调布局"这么简单。真正让页面"活"起来的，是音视频嵌入、过渡、变形、动画这四件套。这篇东西不整虚的，我把四个部分的原理、实操代码、坑点和排查思路全部摊开讲，适合刚学完Flex和Grid、想进一步让页面动起来的人，也适合写了好几年样式但遇到动画卡顿、音频不播、3D旋转失灵时回来翻一翻的老手。

1. 内容整体设计与思路拆解

1.1 为什么把这四个方向放在一起讲

很多人学CSS是零散地学：今天看了个视频说transition很好用，明天又搜到transform: rotate()做翻转，后天做首页的时候发现<video>标签插进去却黑屏。知识是碎片化的，用的时候根本串不起来。

把这四样放在一起，有一个底层逻辑：它们共同构成了"CSS表现层的动态体系"。

• 音视频：把非文本内容塞进页面，解决"内容来源"的问题。
• 过渡（transition）：解决"状态A变到状态B，怎么变"的问题。
• 变形（transform）：解决"元素本身怎么做位置、角度、尺寸上的几何变化"的问题。
• 动画（animation）：解决"预设多帧变化，让元素自主运行"的问题。

在实际项目里，四者经常是协同作战的。比如一个产品展示页：背景放视频（音视频插入），鼠标悬停时卡片上浮并翻转（过渡+变形），进入视口时从底部升上来（动画）……你单独会某一个能力，只能做"能动的页面"；理解四者的分工和配合，才能做"有节奏的页面"。

1.2 先建立一个正确的性能心智模型

在讲任何代码之前，必须先讲性能。因为在CSS动态效果里，最大的坑不是写不出来，而是写出来之后掉帧、卡顿、CPU占用飙高。

浏览器的渲染流水线大致是：解析HTML/CSS -> 计算样式 -> 布局（Layout）-> 绘制（Paint）-> 合成（Composite）。不是所有属性触发这条完整链路。

• 改width、left、top、margin：触发Layout，开销最大。
• 改background-color、box-shadow：触发Paint，开销中等。
• 改transform、opacity：只走Composite，由GPU加速，开销最小。

所以业界有一条不成文的规矩：能用transform和opacity做的动画，就别用width和top去做。这也是为什么下面讲变形和动画的时候，大量操作都是围绕transform展开的。这个认知如果你第一次接触，建议直接刻在脑子里，它决定你后面写的动画是"丝滑"还是"卡成PPT"。

1.3 四种能力的适用边界

先给出一个整体的选用思路，免得你动手时拿不准：

需要特别提醒的是：过渡、变形、动画三者不要混为一谈。过渡是"补间"，它关注的是两个状态之间的差值如何被填充；变形是"结果"，它描述元素最终被几何加工成什么样；动画是"过程"，它定义随时间推进的一连串关键帧。三者互为补充，但不能互相替代。

2. 核心细节解析与实操要点

2.1 音视频插入：不只是加标签那么简单

HTML5原生支持音视频，这是最可靠的方案。基础语法极其简单：

<video src="intro.mp4" controls></video> <audio src="bgm.mp3" controls></audio>

但项目落地时，你很快会遇到三个绕不开的问题。

第一个问题是格式兼容。不同浏览器支持的编码格式并不完全一致。保险做法是提供多种格式源，浏览器自己挑第一个能播的：

<video controls> <source src="intro.webm" type="video/webm"> <source src="intro.mp4" type="video/mp4"> 你的浏览器不支持视频播放。 </video>

这里给小白解释一下controls属性：它让浏览器显示自带的播放控件，包括进度条、音量、全屏按钮。如果去掉它，视频画面会被渲染出来，但你没有任何操作按钮——这在某些需要完全自定义播放器的场景是有意为之，但新手阶段请老老实实加上。

第二个问题是自动播放策略。移动端和桌面端的浏览器普遍限制带声音的自动播放，这是产品经理最常提、前端最头疼的需求之一。常规变通方式是：

• 静音自动播放：<video autoplay muted loop>，很多网站的首页背景视频都这么干。
• 用户交互后播放：在页面的点击事件里调用video.play()，此时浏览器允许带声音播放。
• 音频自动播放基本不要指望，只有极少数用户手势后才能启动。

第三个问题是样式控制。<video>标签虽然看起来像个普通元素，但它的内置控件在不同浏览器里长得完全不一样。如果你想统一风格，两种思路：一是用::-webkit-media-controls系列伪元素去覆盖WebKit内核的控件样式，但兼容性有限；二是隐藏原生控件（去掉controls），自己用DOM加上播放/暂停按钮、进度条，通过JavaScript控制播放。项目里只要是定制化程度高的，基本都走第二条路。

音频同理，<audio>标签在页面上默认是不可见的。你做音乐播放器的时候，一定是自己画按钮、绑事件，原生标签只负责解码和出声。

2.2 过渡（transition）：状态之间要"渐变"而不是"突变"

transition的四个子属性分别是：transition-property、transition-duration、transition-timing-function、transition-delay。合起来写：

.button { background-color: #333; transition: background-color 0.3s ease-in-out; } .button:hover { background-color: #ff6b6b; }

当鼠标悬停时，背景色不会瞬间从深灰跳到红色，而是在0.3秒内平滑变化。这个过程中，浏览器自动计算中间帧。

写transition的时候，三个易错点你必须心里有数。

第一个：不是所有属性都能过渡。常见可过渡属性包括颜色、透明度、尺寸、间距、阴影等；而display这种离散属性不可过渡，典型场景是"悬停时把隐藏的子菜单显示出来"，很多人写成display: none -> block再加transition，结果发现完全没有动画效果。正确做法是结合opacity和visibility，或者用max-height做高度展开：

.dropdown { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; } .dropdown.open { max-height: 300px; opacity: 1; }

第二个：transition需要触发条件。它本身不会主动执行，必须依赖某个状态变化，比如:hover、:focus、新增class等。如果你希望页面加载时就自动播放变化，那应该用animation，而不是transition。

第三个：隐藏了属性名会出问题。如果你写transition: all 0.3s，方便是方便，但对所有属性生效可能会导致意外过渡，比如width变化时的布局抖动。性能敏感场景更不应该用all。

2.3 变形（transform）：几何变换的“底层引擎”

transform支持四类基础变换：位移translate、旋转rotate、缩放scale、倾斜skew。又可以拆成2D和3D两套。

2D变换的常用写法：

.card:hover { transform: translateY(-8px) scale(1.02) rotate(1deg); }

这行的意思是：悬停时元素向上平移8像素、放大到1.02倍、轻微旋转1度。注意多个变换函数写在同一行时，顺序会影响最终效果。比如先旋转再平移，和先平移再旋转，结果不一样。因为变换是按从右到左的顺序应用到元素坐标系上的。

3D变换要稍微多说几句，因为它涉及perspective（透视）的概念。没有透视，3D旋转看起来只是一个扁平的缩放。透视可以加在父容器上，也可以加在元素自身：

.scene { perspective: 800px; } .cube { transform: rotateY(45deg) rotateX(30deg); }

perspective值越小，透视效果越强烈，元素近大远小的感受越明显。通常800到1200px看起来比较自然。

还有一个高频坑：transform会创建新的层叠上下文和包含块。简单说，给元素加了transform之后，它对于内部position: fixed;子元素的行为可能会发生变化，浮动和定位的坐标系也会受影响。某些老项目中，你给一个元素设置transform后，里面的position: fixed弹窗突然不跟着视口走了，多半就是这个原因。

2.4 动画（animation）：用关键帧编排“时间轴”

animation系属性比transition复杂得多，核心是@keyframes。基本结构：

@keyframes floatIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-title { animation: floatIn 0.8s ease-out forwards; }

from和to是简写，相当于0%和100%。你可以写任意多个百分比节点，编排更复杂的动作：

@keyframes swing { 0% { transform: rotate(0deg); } 40% { transform: rotate(20deg); } 70% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }

swing这个动画模拟了一个先向右摆、回弹向左、最后归位的过程。这就是关键帧动画的核心思路：你不需要描述每一帧，只需要规定几个关键时刻的状态，浏览器自动补间。

配置动画时，animation是一个复合属性，注意区分两个容易混淆的值：

• infinite：无限循环播放。
• forwards：动画结束后，保留最后一帧的状态。如果没写这个，动画结束的瞬间元素会跳回初始样式。
• alternate：奇数次正向播放，偶数次反向播放，适合做往复摆动效果。

实操中最常见的困惑是："为什么动画结束后元素又跳回去了？"就是因为忘了加forwards。另一个常见困惑是"加了transform的动画为什么位移起点不对"，多半是因为@keyframes里的关键帧状态和元素自身的静态样式没有统一，浏览器以关键帧为准，但结束后的跳变又以静态样式为准。

3. 实操过程与核心环节实现

下面用一个完整的示例串起全部四个内容：做一个产品介绍页中的一个卡片区块，背景加视频，卡片悬停有过渡和变形，卡片入场有动画。这算是比较典型的个人项目练手Demo，我按完整步骤写，你跟着敲一遍就能跑。

3.1 搭音视频底衬

先声明一下，我这里示例里的媒体资源文件，你需要自行准备或者换成网络上的公开测试资源。核心是看结构。

<section class="showcase"> <video class="bg-video" autoplay muted loop> <source src="bg.webm" type="video/webm"> <source src="bg.mp4" type="video/mp4"> </video> <div class="content"> <!-- 卡片们放这里 --> </div> </section>

样式部分，视频要盖住整个区块，但不能挡住文字交互：

.showcase { position: relative; overflow: hidden; } .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .content { position: relative; z-index: 1; }

这里object-fit: cover是视频和图片的通用技巧，作用是让媒体内容等比缩放并填满容器，超出部分裁掉，避免变形。z-index确保内容层在视频层上方。overflow: hidden是防止视频撑破圆角或容器边界。

如果你用的是音频做背景音乐，则不需要渲染层，直接把<audio>标签放到任意位置，用JavaScript控制播放即可。但切记自动播放限制——除非用户点过页面，否则大概率被拦。

3.2 写卡片结构和基本样式

卡片本身是普通的DOM结构：

<div class="card-grid"> <article class="card"> <h3>基础功能款</h3> <p>适合日常展示场景，支持悬停动效。</p> <a href="#">查看详情</a> </article> <article class="card"> <h3>3D展示款</h3> <p>带透视翻转效果，适合产品陈列。</p> <a href="#">查看详情</a> </article> <article class="card"> <h3>全动态款</h3> <p>入场加载动画+无限循环动效。</p> <a href="#">查看详情</a> </article> </div>

基础样式先摆正：

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; padding: 60px 20px; } .card { background: rgba(255, 255, 255, 0.92); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.35s ease, box-shadow 0.35s ease; }

这步其实已经用了transition，不过是静态过渡。好处是当悬停状态发生改变时，卡片能平滑地做出反应，而不是瞬跳。

3.3 加入悬停过渡与变形

核心部分来了。给三种卡片分别设计悬停表现：

.card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .card:nth-child(2) { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .card:nth-child(2):hover { transform: rotateY(8deg) rotateX(4deg) scale(1.02); } .card:nth-child(3) { transition: transform 0.45s ease; } .card:nth-child(3):hover { transform: scale(1.05) rotate(-1deg); }

第二张卡件的cubic-bezier(0.34, 1.56, 0.64, 1)是"回弹曲线"：数值超过1会让过渡产生一点超出目标位置的弹性，视觉上更活泼。而第一张卡用的是默认的ease，更稳重。这里你能直观看到过渡曲线选择对交互质感的影响。

需要补充的是transform写在两个地方时会出现覆盖逻辑：.card的静态样式里没有写transform，:hover里写了，所以只有悬停时变形才会激活。如果静态样式和:hover里都写了transform，悬停时的写法会完全覆盖静态的写法，而不是叠加。例如静态是scale(1)，悬停是translateY(-10px)，那么悬停时不会同时缩放和平移，后者会覆盖前者。想要叠加，必须把两个函数写在同一行：transform: translateY(-10px) scale(1)，这一点务必记住。

3.4 加入入场动画

上面说的都是悬停动效，下面用@keyframes和animation实现卡片列表加载时的入场效果。

先用一个立方体旋转的动画来示例3D变换和动画的组合：

@keyframes cardEntrance { 0% { opacity: 0; transform: translateY(40px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .card { animation: cardEntrance 0.6s ease-out both; } .card:nth-child(1) { animation-delay: 0s; } .card:nth-child(2) { animation-delay: 0.15s; } .card:nth-child(3) { animation-delay: 0.3s; }

both是animation-fill-mode的一个值，等价于backwards+forwards：动画开始前，先把0%关键帧的状态应用上；动画结束后，保持100%关键帧的状态。在这里，both保证了页面加载瞬间，所有卡片先处于透明+下移的初始状态，再依次入场。没有both或backwards的话，延迟时间内卡片会以完整状态显示，然后突然消失再重新入场，闪一下，观感很糟。

三个延迟时间形成"依次进场"的视觉节拍，这是做列表入场动画最基础的做法。实际项目里可以用JavaScript根据索引动态设置animation-delay，但CSS也完全够用。

3.5 做一个组合示例：3D旋转卡片

把音视频背景、悬停过渡、变形、进场动画全部整合一起时，需要注意：

1. 进场动画用transform，悬停变形也用transform，两者在动画结束后会产生冲突吗？答案：取决于动画是否结束。只要animation运行期间，关键帧里的transform优先级高于普通样式。动画结束后，如果设置了forwards或both，关键帧的最后一帧会一直覆盖普通样式，此时悬停的transform会失效。解决办法是：不要给同一个元素的入场动画和悬停变形都设置transform，要么让动画最后一帧的transform为none，然后把变形包在子元素上，要么动画结束后移除动画类。

这里推荐的结构是：外层元素做入场动画（opacity和translateY），内层元素做悬停变形（rotateY和scale）。互不干扰：

<article class="card card--entrance"> <div class="card-inner"> <h3>产品型号A</h3> <p>完整的产品描述。</p> </div> </article>

.card--entrance { animation: cardEntrance 0.6s ease-out both; } .card-inner { transition: transform 0.4s ease; } .card--entrance:hover .card-inner { transform: rotateY(10deg) scale(1.02); }

这是我在实际项目里最常用的分层思路：动画层、交互层、内容层分离，各管各的样式属性，少踩很多没必要的坑。

4. 常见问题与排查技巧实录

4.1 视频不显示、黑屏或无法自动播放

排查按三步走。

第一，确认资源路径和编码格式。右键视频文件看属性，比如.mp4文件，编码是H.264还是HEVC？浏览器支持度不同。换成webm格式通常兼容性更好。用浏览器直接打开视频URL，看是否能在浏览器里直接播放，这是一个很有效的定位手段。

第二，确认自动播放策略。如果你写了autoplay但没写muted，几乎必然被拦截，尤其移动端。视频想自动播放，请同时设置autoplay、muted、loop。

第三，检查元素尺寸。<video>没有width和height时，默认尺寸可能是300x150。如果容器很小且没有显式给视频设宽高，看起来就像没显示。加一条width: 100%; height: 100%; object-fit: cover基本能解决。

4.2 transition没生效，或者瞬间完成

最常见的原因是：你只写了transition-property或者只写了transition-duration，而复合属性不完整。transition要在状态变化前就定义在元素上，不是定义在:hover状态上。如果你把transition写在:hover里，鼠标移入时浏览器才去应用过渡配置，但状态已经突变完了，所以你只能看到"移出时"的过渡，移入时是瞬变。

另一个原因是你过渡的属性在计算上不可过渡。比如display: none到display: block，这种属性没有中间态。按照前面说的，换用opacity+visibility组合或者max-height方案。

还有一个隐蔽的原因：元素本身设置了animation-fill-mode: forwards且动画仍在运行，动画的关键帧会对相同属性拥有更高优先级，导致transition失去作用。此时暂停动画或分开元素即可。

4.3 3D旋转看起来像2D缩放，没有立体感

这个问题的原因高度统一：缺少perspective。perspective必须加在需要3D透视的元素的父容器上，或者作为transform的第一个函数写进元素自身，例如transform: perspective(800px) rotateY(45deg)。

只给子元素加rotateY，父容器没有perspective，视觉上只是宽度在缩放，毫无立体感。给父容器加上perspective: 900px;之后，立刻会出现近大远小效果。另外，如果还需要子元素保持真正的3D空间（比如卡片翻面后看到背面内容），父容器还需要transform-style: preserve-3d;。

4.4 animation动画结束又跳回原位

原因在之前提过：animation-fill-mode没有设置forwards或both。动画结束后，浏览器会把元素的样式回滚到没有动画时的静态样式。如果你的动画终点状态（100%关键帧）和静态样式不一致，就会看到明显的跳变。

如果想保留终态，就加forwards；如果想动画开始前也保持初态，就加backwards；一般我直接用both，简单粗暴。如果不想保留终态，而是动画结束后自然回到原样，那就不用管它。

4.5 动画卡顿、掉帧，怎么排查和优化

优先检查，你是不是在动画里动了width、height、top、left、margin这些触发布局的属性。如果是，换成transform来实现位移和缩放。例如"元素从左移到右"，用transform: translateX()代替left。元素变大变小，用scale()代替width/height。

其次，检查是不是图层太多、合成负担重。可以使用浏览器开发者工具的Performance面板录制一段动画，看帧率（FPS）是否稳定在60附近。如果掉到30甚至更低，把不需要同时动画的元素数量降下来，或者用will-change: transform提示浏览器提前优化，但不要滥用，否则内存占用会上升。

再一个容易被忽略的点：动画中box-shadow和filter（如blur）非常耗性能。它们一旦动起来，每帧都要重新计算阴影和模糊，掉帧概率极高。如果必须用阴影动效，优先考虑用透明度渐变的伪元素模拟，或者缩短动画时长、缩小作用元素面积。

4.6 常见问题速查表

4.7 分享几个走出来比较有价值的排查心得

拿我个人经验来说，调试CSS动效最有效的工具还是浏览器开发者工具里的"样式"面板加动画控制。Chrome的开发者工具在Styles面板里能显示正在应用的动画，并且支持拖动时间线来逐帧预览。碰到动画问题，先把元素状态一步步拆开看：静态样式、关键帧样式、伪类样式，逐一禁用，定位到底哪一条规则在起作用。

还有一个习惯：动画逻辑尽量集中在CSS里，不要用JavaScript的setInterval去改样式实现动画。一旦大量使用JS驱动的样式修改，布局计算会频繁发生，性能比CSS动画差一个量级。CSS能做到的，就不要让JS重复造轮子。

5. 完整示例：把四者组合成一个可用模块

前面的内容比较分散，这里给一个可以直接复制运行的完整HTML文件，包含视频背景、表格卡片、入场动画、悬停过渡变形。文件里如果有不能访问的视频源，替换成本地文件即可。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS动态效果组合示例</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.16); } body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f6f8; color: #222; } .showcase { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: center; justify-content: center; } .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .showcase .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 1; } .content { position: relative; z-index: 2; text-align: center; color: #fff; padding: 40px 20px; } .content h1 { font-size: 40px; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .content p { font-size: 18px; opacity: 0.9; } .card-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: -40px auto 40px; padding: 0 20px; } .card { background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 32px; box-shadow: var(--card-shadow); animation: cardEntrance 0.6s ease-out both; } .card:nth-child(1) { animation-delay: 0s; } .card:nth-child(2) { animation-delay: 0.15s; } .card:nth-child(3) { animation-delay: 0.3s; } .card h3 { font-size: 20px; margin-bottom: 12px; } .card p { font-size: 15px; line-height: 1.6; color: #555; margin-bottom: 20px; } .card a { display: inline-block; padding: 8px 20px; border-radius: 999px; background: #2c3e50; color: #fff; text-decoration: none; font-size: 14px; transition: background-color 0.25s ease, transform 0.25s ease; } .card a:hover { background: #ff6b6b; transform: scale(1.04); } .card--flip { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .card--flip:hover { transform: rotateY(6deg) rotateX(3deg) translateY(-8px); box-shadow: var(--card-shadow-hover); background: #fff; } @keyframes cardEntrance { 0% { opacity: 0; transform: translateY(40px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } } </style> </head> <body> <section class="showcase"> <video class="bg-video" autoplay muted loop> <source src="bg.webm" type="video/webm"> <source src="bg.mp4" type="video/mp4"> </video> <div class="overlay"></div> <div class="content"> <h1>动态效果实战展示</h1> <p>视频背景 + 入场动画 + 悬停变形与过渡</p> </div> </section> <main class="card-grid"> <article class="card"> <h3>基础卡</h3> <p>支持入场动画，按钮悬停有过渡变色。</p> <a href="#">查看详情</a> </article> <article class="card card--flip"> <h3>3D交互卡</h3> <p>悬停时产生立体翻转效果，适合产品陈列。</p> <a href="#">查看详情</a> </article> <article class="card"> <h3>组合应用卡</h3> <p>入场动画与内部元素动效分离，互不冲突。</p> <a href="#">查看详情</a> </article> </main> </body> </html>

这个示例使用了.card--flip类来专门承载悬停3D变形。组合应用卡则演示了"动画层在外、过渡层在内"的思路：外层卡片的入场动画结束后，内部的<a>标签的悬停变形和颜色过渡依然可以正常工作，互不干扰。

如果你把.card--flip类和入场动画直接放在同一个元素上，动画结束后因为both模式的存在，关键帧的transform: translateY(0) scale(1)会一直覆盖悬停的transform: rotateY(6deg) ...，导致悬停立体效果完全失效。这正是我前面强调的冲突场景，你可以故意改回去试一下，理解会更深。

我当年踩过这个坑之后，养成了一个习惯：凡是同一个元素上既要动画又要交互变形的，一律拆成嵌套结构，外层管动画，内层管交互。这个习惯后来帮我省了无数调试时间，也希望你直接用上。

6. 风格化的细节：过渡曲线、动效节奏与可访问性

6.1 动效节奏决定了页面的"质感"

新手和资深前端做出来的动画，往往代码能力差不多，差的是对节奏的把握。举几个我常用的参数：

• 小反馈（按钮悬停、图标变化）：0.15s到0.25s。太短则生硬，太长则拖沓。
• 中规模（卡片浮起、面板展开）：0.3s到0.5s。
• 大规模（页面切换、弹层进出）：0.5s到0.8s。

过渡曲线也影响节奏感知。linear适合进度条这类持续匀速运动的场景；ease-in适合离场，像物体被推走；ease-out适合进场，像物体滑入后减速停住；而带回弹的cubic-bezier(0.34, 1.56, 0.64, 1)适合需要活泼俏皮的反馈。曲线的实质是速度变化，你可以把它理解为"动画的演技"。

6.2 别忘了尊重用户的系统设置

一个我见过很多人忽略的点：操作系统提供了"减少动态效果"的辅助功能设置。一些用户因为眩晕、注意力障碍等原因会主动开启这个选项。作为开发者，可以做一个很简单的适配：

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } }

这条规则会把所有动画和过渡的持续时间压缩到几乎为0，相当于禁用动效。成本极低，但对一部分用户来说体验差异巨大。这个细节很加分，尤其是做面向公众的网站时。

6.3 让动效有目的，而不是为动而动

做页面动效前先问自己一句：这个动效是为了说明层级关系、引导视觉焦点、还是单纯为了炫？如果是单纯炫，建议砍掉。好的动效应该给用户传递信息：状态变化、元素来源、操作结果。比如卡片入场动画向用户传递"这里有新内容出现"，按钮的缩放过渡传递"我被按下了"，视频背景传递"这个页面是多媒体调性"。

我见过太多页面把所有元素都加上"弹跳入场"的动画，结果用户第一眼根本不知道看哪里。动效是设计语言的一部分，克制才是高级。

7. 个人经验与几个残留的提醒

按我自己的使用频率排个序：transform用得最多，transition紧跟其后，animation在关键节点用，音视频插入则根据产品形态看是否需要。如果把这四样比作工具箱，transition是螺丝刀，transform是电动扳手，animation是数控机床，音视频是原料。各有各的位置，没有谁替代谁。

还有几个零碎但重要的点，分享给你：

第一，写transition时尽量指定具体属性。虽然all写起来方便，但在复杂页面上，它会让一些你没预期的属性也跟着过渡。比如你在控制台调试时改了个opacity，结果它慢慢变了0.5秒，可能反而干扰你的判断。指定属性名之后，行为可预期。

第二，动画不要过多嵌套。一个元素动，它的父元素也在动，波及下来的合成层可能成倍增加，性能问题往往由此而来。做复杂动效时，优先保证核心元素的性能，辅助元素能动就行，不要全员上动画。

第三，transform和opacity动画确实由GPU加速，但GPU内存不是无限的。手机端尤其明显，大量图层叠加会导致耗电增加甚至白屏。真机上测一测是你的必修课，开发者工具模拟器不能替代真机。

第四，音视频资源记得做加载策略。页面首屏的视频如果体积过大，白屏时间会很长。可以考虑preload="metadata"先加载视频信息，或者用poster属性显示一张封面图，等用户悬停或点击时再真正加载视频数据。很多人不知道<video>有poster属性，它就是在视频加载完之前显示的静态图片，这是非常实用的体验兜底。

最后再说一个非常实际的小技巧：调试动画卡不卡，可以在开发者工具里勾上"Rendering -> Paint flashing"，然后播放动画。如果画面上一大片绿色区域在闪烁，说明重绘面积很大，这时候就要去优化属性。如果是小范围的绿色或没有闪烁，基本说明动画走了合成层，性能是健康的。这个技巧帮我快速定位过好几个隐蔽的卡顿点，比单纯猜性能问题高效太多。

CSS的动态能力说难也难，说简单也简单。难在性能与兼容的边界，简单在核心API就这么多。你只要把每个属性的适用场景和叠加规则吃透，再动手做两三个完整Demo，基本就能掌握得七七八八。剩下的，就是在具体项目里踩坑、填坑、积累手感了。