过渡：属性、时长与时间函数
添加 transition，使 CSS 属性变化平滑过渡，选择合适的时长，并选择 ease-in-out 等缓动函数。
过渡：属性、时长与时间函数 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
什么是 CSS 过渡？
CSS 过渡会在属性发生变化时，将其从一个值动画到另一个值（例如悬停、聚焦或切换类时）。它采用声明式方式——您告诉 CSS 要过渡哪些属性以及如何过渡，剩下的由浏览器完成。
基本语法
transition: property duration timing-function delay。您可以用逗号分隔，列出多个过渡。
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour change属性值
请指定要过渡的属性。使用all可以为每个可动画属性添加过渡，但这可能会在无关属性上触发不必要的过渡。为了获得更好的性能和可预测性，请明确指定属性。
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }持续时间 — 时长
过渡持续时间可以使用s（秒）或ms（毫秒）表示。微交互使用较短的持续时间（100–200 毫秒）。组件状态变化使用中等时长（200–400 毫秒）。页面级动画使用较长时长（400 毫秒以上）。
时间函数 — 动画感受
时间函数控制加速曲线。常见值包括：ease（默认：开始慢、中间快、结束慢）、linear（匀速）、ease-in（开始较慢）、ease-out（结束较慢）、ease-in-out。自定义曲线：cubic-bezier(x1, y1, x2, y2)。
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }延迟——何时开始
过渡延迟会在指定时间后启动动画。您可以用它错开多个元素，或防止快速移动鼠标时意外触发悬停效果。
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}transitionend 事件
JavaScript 可以通过 transitionend 事件监听过渡何时结束。这对于淡出后移除元素，或触发序列中的下一步操作非常有用。
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});变换元素
transform 属性由 GPU 加速，非常适合用于过渡。常见的变换包括：translate()、scale()、rotate() 和 skew()。为 transform 和 opacity 设置动画只会触发合成，这是最快的渲染路径。
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}哪些属性可以过渡
任何具有数值的属性都可以设置过渡：opacity、colour、transform、width、height、padding、border 和 font-size。display 和 visibility 之类的属性无法平滑过渡，因此请改用 opacity 实现淡入或淡出。
实践：模态框淡入
让模态框从略小的尺寸开始淡入并逐渐放大。使用 JavaScript 应用 .open 类，由 CSS 处理动画。
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}性能：坚持使用 Transform 和 Opacity
为会触发布局的属性（width、height、margin、top、left）设置动画的开销很大，因为浏览器必须在每一帧重新计算布局。请坚持使用 transform 和 opacity，以实现流畅的 60fps 动画。
快速检查
为了获得最佳性能，您应该优先为哪个 CSS 属性设置动画？
回顾：CSS 过渡
transition：属性、时长、时间函数、延迟。请为特定属性设置动画，而不是使用“all”。使用 ease、ease-out 和 ease-in-out 实现自然的运动效果。监听 transitionend 以串联操作。坚持使用 transform 和 opacity 来提升性能。在 JS 中切换类，以触发过渡。
常见问题解答
「过渡：属性、时长与时间函数」课时是免费的吗？
是的 — 「过渡：属性、时长与时间函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「过渡：属性、时长与时间函数」这节课中我会学到什么？
添加 transition，使 CSS 属性变化平滑过渡，选择合适的时长，并选择 ease-in-out 等缓动函数。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「过渡：属性、时长与时间函数」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。