CSS 过渡与动画
CSS 中的 transition 属性、关键帧动画，以及在 Vue Transition 中使用 Animate.css。
CSS 过渡与动画 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
在 CSS 中实现动画的两种方式
CSS 提供了两种与 Vue 过渡完美配合的工具：transition 属性（在两个状态之间插值）以及带有 animation 的 @keyframes（定义多步骤时间线）。Vue 可以驱动其中任意一种。
transition 简写语法
transition 简写语法可以将属性、时长、时间函数和延迟组合在一行中。顺序是：属性、时长、缓动、延迟。
.box {
/* property duration easing delay */
transition: transform 0.4s ease-in-out 0s;
}为多个属性添加过渡
使用逗号分隔多个过渡。您可以同时为变换和不透明度添加动画，从而实现滑动并淡出的效果。
.slide-enter-active,
.slide-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(20px);
opacity: 0;
}transition 不够用时
transition 只能在两个状态之间添加动画。对于弹跳、脉冲或多阶段运动，您需要使用 @keyframes，它允许您定义多个关键节点。
定义关键帧
@keyframes 使用百分比（或 from/to）为一系列状态命名。每个停靠点描述时间线在该位置的样式。
@keyframes bounce-in {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}animation 属性
使用 animation 简写应用一组关键帧：名称、时长、时间函数、延迟、迭代次数和方向。
.bounce-enter-active {
animation: bounce-in 0.5s ease both;
}将关键帧接入过渡
将 animation 放在 enter-active 类上，使其在插入期间播放。离开时，以反向方式运行同一组关键帧。
.bounce-leave-active {
animation: bounce-in 0.5s ease reverse both;
}使用 Animate.css
Animate.css 是一个提供现成关键帧动画的库。您不必编写自己的类，而是可以通过自定义类属性告诉 Vue 直接使用 Animate.css 的类。
<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->进入活动类与离开活动类
<Transition> 接受用于覆盖自动生成类名的属性。enter-active-class 和 leave-active-class 允许您接入任意外部类，非常适合 Animate.css。
<Transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">Animated by Animate.css</div>
</Transition>显式设置时长
当 CSS 时序不明确（同时使用动画和过渡）时，请设置 duration 属性，让 Vue 确切知道何时移除类。它可以接受一个数字，或一个包含进入和离开时长的对象。
<Transition :duration="{ enter: 500, leave: 300 }">
<div v-if="show">Precise timing</div>
</Transition>缓动函数很重要
时间函数决定动效的感觉。进入时使用 ease-out 会让人感觉响应迅速，离开时使用 ease-in，而 cubic-bezier() 则能提供完全的控制。
.pop-enter-active {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}快速检查
哪个属性可以让您在进入时应用 Animate.css 类？
回顾
您比较了 transition 简写（两状态插值）与 @keyframes 加 animation（多步骤时间线），并学习了如何通过 enter-active-class 和 leave-active-class 属性集成 Animate.css，以及使用 duration 进行精确计时。
常见问题解答
「CSS 过渡与动画」课时是免费的吗？
是的 — 「CSS 过渡与动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「CSS 过渡与动画」这节课中我会学到什么？
CSS 中的 transition 属性、关键帧动画，以及在 Vue Transition 中使用 Animate.css。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「CSS 过渡与动画」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。