CSS 过渡与 JS 过渡
在 CSS 关键帧过渡和 JavaScript tick 函数之间做出选择。
CSS 过渡与 JS 过渡 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
两种模式
自定义过渡返回 css 函数（GPU）或 tick 函数（由 JS 驱动、每帧执行）。
何时使用 CSS
用于变换、不透明度、颜色，以及 CSS 可以设置动画的任何属性。CSS 在合成器上运行，可达到 60fps。
何时使用逐帧回调
用于文字变化、画布像素或其他非 CSS 属性。
逐帧回调的开销
逐帧回调会在每个动画帧中通过 JavaScript 运行，因此比 CSS 更耗费资源。
混合方式
某些过渡可以使用 CSS 处理视觉效果，并使用 tick 偶尔更新非 CSS 内容。
跨浏览器支持
CSS 动画得到普遍支持；tick 始终可用，因为它由 JS 实现。
无障碍
如果在过渡内部检查 prefers-reduced-motion，两者都会遵循该设置。
性能分析
使用 Performance 面板比较 CSS 和 tick 的实现。
回退模式
如果 CSS 无法实现该效果，请优雅地回退到 tick。
组合使用
同一视图中的多个元素可以使用不同的过渡，并混合使用 CSS 和 tick。
最佳实践
默认使用 CSS。只有在 CSS 确实无法表达动画时，才使用 tick。
快速检查
什么时候应该优先使用过渡中的 css 函数？
回顾
选择 css 实现 GPU 加速的过渡；将 tick 留给文字或画布变化等非 CSS 动画。
常见问题解答
「CSS 过渡与 JS 过渡」课时是免费的吗？
是的 — 「CSS 过渡与 JS 过渡」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「CSS 过渡与 JS 过渡」这节课中我会学到什么？
在 CSS 关键帧过渡和 JavaScript tick 函数之间做出选择。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「CSS 过渡与 JS 过渡」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 编写自定义过渡函数
- 过渡参数：node、duration、delay
- 创建变形过渡
- CSS 过渡与 JS 过渡