@keyframes 语法与动画属性
使用 @keyframes 定义动画步骤，并通过 animation 简写属性应用动画。
@keyframes 语法与动画属性 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是 CSS 动画
CSS 动画使用 @keyframes 让属性随时间经历多个步骤的变化。与过渡不同，动画可以自动开始，也可以在添加类时开始，并且支持复杂的序列。
@keyframes 语法
请使用百分比（0% 到 100%）或 from/to 关键字定义动画步骤：
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
动画属性
请使用 animation 简写属性或其子属性为元素应用动画：
<h1 class="hero-text">Welcome!</h1>
动画名称属性
按名称引用 @keyframes 规则：
<div class="spinner"></div>
动画时长属性
设置动画完成一个循环所需的时长：
<div class="pulse"></div>
多个动画步骤
请使用百分比关键帧实现复杂的多步骤动画：
<div class="slide-demo">Sliding in</div>
为多个属性添加动画
每个关键帧步骤都可以同时为多个属性添加动画：
<div class="bounce-demo"></div>
为每个关键帧设置动画时间函数
可以为每个关键帧步骤设置时间函数，从而控制各个独立节点之间的缓动，而不是控制整个动画。
多个动画
请使用以逗号分隔的值为同一个元素应用多个动画：
<div class="element">Two animations combined</div>
动画播放状态属性
动态暂停和恢复动画：
<div class="card">Hover the card to pause<div class="spinner"></div></div>
CSS 动画与过渡总结
请根据情况选择：
- 过渡：两个状态，由状态变化触发，较为简单
- 动画：多步骤、自动开始、可循环，控制能力更强
快速检查
哪个 @keyframes 关键字表示动画的开始状态？
回顾
请使用 @keyframes，通过 from/to 或百分比节点定义动画步骤。使用 animation 简写属性，并指定名称、时长、时间函数和填充模式。多个动画之间使用逗号分隔。简单的双状态变化请使用过渡，复杂序列请使用动画。
常见问题解答
「@keyframes 语法与动画属性」课时是免费的吗？
是的 — 「@keyframes 语法与动画属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「@keyframes 语法与动画属性」这节课中我会学到什么？
使用 @keyframes 定义动画步骤，并通过 animation 简写属性应用动画。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「@keyframes 语法与动画属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- @keyframes 语法与动画属性
- 动画方向、填充模式与迭代
- 串联与编排动画
- 使用 prefers-reduced-motion 创建无障碍动画