过渡多个属性
使用逗号分隔的值，同时为多个 CSS 属性应用过渡。
过渡多个属性 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
为什么要对多个属性设置过渡
实际的用户界面交互通常会同时改变多个属性——例如悬停时同时改变背景颜色、阴影和缩放比例。CSS 支持为每个属性分别设置缓动方式和持续时间。
以逗号分隔的过渡
使用逗号列出多个过渡。每一项分别应用于一个属性：
<div class="card">Card</div>为不同属性设置不同持续时间
为每个属性设置不同的速度，从而营造层次丰富且自然的感觉：
<button class="btn">Hover-ready button</button>为不同属性设置不同缓动方式
混合使用缓动函数，使每个属性都呈现合适的运动感觉：
<div class="modal">Modal content</div>transition: all 的缺点
使用 transition: all 意味着每个发生变化的属性都会使用相同的时间设置。这可能会让本应瞬间切换的属性产生不必要的动画，例如 display 或位置变化。
可中断的过渡
CSS 过渡可以中断。如果悬停状态在过渡进行到一半时结束，过渡会从当前动画值反向播放，而不是从最终状态开始。这可以实现平滑反转，避免突兀跳变。
协调进入与退出
通过在 :hover 状态中覆盖过渡设置，可以为鼠标悬停进入和移出使用不同的持续时间：
<div class="card demo-active">Card</div>使用延迟实现交错效果
为兄弟元素逐步增加延迟，以实现交错显示效果：
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>使用 CSS 自定义属性实现交错效果
通过 JavaScript 或 HTML 设置的 CSS 自定义属性来指定交错延迟：
<div class="item">Item</div>过渡与动画
对于两种状态之间的变化（空闲 → 悬停），请使用过渡。对于多步骤序列、循环效果或自动开始的动画，请使用 @keyframes 动画。
will-change 优化
提示浏览器哪些属性将执行动画，以便浏览器提前进行优化。请谨慎使用——它会消耗 GPU 内存。
<div class="card">Card</div>快速检查
某个卡片在基础状态上设置了 transition: background 150ms, transform 250ms。当鼠标悬停时，如果用户在动画进行到一半时快速移开光标，会发生什么？
回顾
以逗号分隔的过渡可以让每个属性拥有各自的时长、缓动和延迟。请避免使用 transition: all，因为它可能会为不 intended 的属性添加动画。过渡可以被中断，并会从当前位置平滑地反向运行。请使用延迟实现错峰效果。
常见问题解答
「过渡多个属性」课时是免费的吗？
是的 — 「过渡多个属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「过渡多个属性」这节课中我会学到什么？
使用逗号分隔的值，同时为多个 CSS 属性应用过渡。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「过渡多个属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。