过渡属性、持续时间与时序
定义哪些属性参与过渡、过渡需要多长时间，以及通过 delay 何时开始。
过渡属性、持续时间与时序 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是 CSS 过渡
CSS 过渡会在属性值发生变化时，在指定时长内对两个属性值进行插值（例如悬停时）。无需使用 JavaScript。
transition-property
指定要进行动画处理的 CSS 属性。使用 all 可以对每个可进行动画处理的属性应用过渡，也可以列出具体属性。
<button>Save changes</button>transition-duration
设置过渡所需的时长。接受以秒（s）或毫秒（ms）表示的时间值。
<div class="card">Card</div>过渡简写属性
组合全部四个过渡子属性：property | duration | timing-function | delay。
<button class="btn">Submit</button>多个过渡
使用逗号分隔多个过渡，以便分别对不同属性进行动画处理：
<div class="card">Card</div>transition-delay
延迟过渡的开始时间。适合用于安排动画顺序，或让一个过渡完成后再开始另一个过渡。
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>在基础状态上设置过渡
始终将 transition 属性放在基础状态上，而不是 :hover 状态上。这样可以确保鼠标悬停进入和移出时都会播放过渡。
<button class="btn demo-active">Hover me</button>哪些属性可以设置过渡
大多数数值型 CSS 属性都可以设置过渡：颜色、尺寸、不透明度、变换等。离散属性（例如 display）无法进行平滑插值，只会瞬间切换。
transition: all 警告
使用 transition: all 可能会让您不打算设置动画的属性也产生意外动画。在生产代码中，请始终明确指定属性。
颜色过渡
颜色过渡会在不同颜色值之间进行插值。使用相同的颜色格式可以获得最佳效果：
<button class="btn demo-active">Hover me</button>过渡与布局抖动
出于性能考虑，应避免对 width、height、margin 和 padding 等会触发布局的属性设置过渡。它们会在每个动画帧都引发重新计算布局。请改用 transform 和 opacity。
快速检查
应将 transition 属性放在哪里，才能确保鼠标悬停进入和移出时都会播放过渡？
回顾
CSS 过渡使用 transition-property、duration、timing-function 和 delay，使属性变化在一段时间内平滑完成。将过渡放在基础状态上，以实现双向动画。出于性能和可预测性的考虑，应优先使用具体的属性列表，而不是 all。
常见问题解答
「过渡属性、持续时间与时序」课时是免费的吗？
是的 — 「过渡属性、持续时间与时序」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「过渡属性、持续时间与时序」这节课中我会学到什么？
定义哪些属性参与过渡、过渡需要多长时间，以及通过 delay 何时开始。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「过渡属性、持续时间与时序」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。