CSS基础教程（五十二）动画：别卷JS了！让CSS动画让你的网页“扭”起来，代码跳舞的秘密在这里！

在这个注意力稀缺的时代，一个活灵活现、动感十足的网页就是勾住用户眼球的最佳鱼钩。而说到网页动画，很多人的第一反应是JavaScript——没错，它功能强大，但杀鸡何必用牛刀？对于大量的交互反馈和视觉润饰，CSS动画这位轻量级的超级英雄往往才是更优雅、更高效的选择。

今天，我们就来揭开CSS动画的神秘面纱，看看它是如何让我们的代码翩翩起舞的。

一、 两大核心：Transition 与 Animation

CSS动画世界有两大支柱：Transition（过渡） 和 Animation（动画）。它们像是动画界的“文科生”和“理科生”。

1. Transition（过渡）： 温和的“文科生”

• • 性格特点： 简单、直接。它用于定义当CSS属性值发生变化时，这个变化过程应该如何发生。它不创造新的状态，只是平滑地、渐进地从一个状态过渡到另一个状态。非常适合处理悬停（:hover）、聚焦（:focus）等简单交互。
  • 核心属性四件套：

• • • transition-property: 指定哪个属性要动（如 all, opacity, transform）。
    • transition-duration: 动画持续多久（如 1s, 200ms）。
    • transition-timing-function: 动画的节奏曲线（如 ease, linear, ease-in-out），这是动画的灵魂所在！
    • transition-delay: 动画开始前的延迟时间。

一句话总结：Transition是“傻瓜式”的，你只需要定义头和尾，它自动补全中间过程。

1. Animation & @keyframes： 强大的“理科生”

• • 性格特点： 复杂、强大、可控。通过定义 @keyframes 关键帧规则，你可以精确控制动画序列中任意时间点的样式。它不依赖于状态变化，可以自动播放、循环往复、甚至反向播放。
  • 核心成员：

• • • @keyframes: 定义动画的完整序列。从0%到100%，你想让元素怎么扭，就在这里一帧一帧地给它编舞。
    • 动画属性组：