CSS 过渡与动画入门：让页面动起来

想让网页不再"死板"？CSS 的 transition（过渡）和 animation（动画）两大机制，可以不写一行 JavaScript 就让元素平滑地变化。这篇带你搞懂它们的用法与区别。

一、transition：状态之间的平滑过渡

transition 用于在两个状态之间平滑过渡，最常见的场景是鼠标悬停（hover）：

.button {
  background: #3498db;
  transition: background 0.3s ease;
}
.button:hover {
  background: #e74c3c;
}

鼠标移入时，背景色会在 0.3 秒内从蓝变红，而不是瞬间跳变。

transition 是简写属性，展开后包含 4 个部分：

.button {
  transition-property: background;  /* 过渡的属性 */
  transition-duration: 0.3s;        /* 持续时间 */
  transition-timing-function: ease; /* 速度曲线 */
  transition-delay: 0.1s;           /* 延迟时间 */
}

常用速度曲线：ease（默认，先快后慢）、linear（匀速）、ease-in（加速）、ease-out（减速）。

二、一次过渡多个属性

多个属性用逗号隔开，也可以用 all 过渡所有可动画属性：

.card {
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);  /* 上浮 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

这是"卡片悬停上浮"效果的经典写法。

三、animation：更自由的多帧动画

transition 只能在两个状态间过渡。如果需要多段动作、循环播放，就要用 animation 配合 @keyframes：

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tip {
  animation: fadeIn 0.5s ease both;
}

fadeIn 定义了从透明到不透明、从下方 10px 升起的动画；both 让元素在动画开始前保持第一帧、结束后停在最后一帧。

四、让动画循环与往复

animation 还能控制播放次数和方向：

.pulse {
  animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

infinite 表示无限循环，alternate 让动画每次反向播放，一呼一吸的缩放效果比单纯重复更自然。若只想播放固定次数，把 infinite 换成数字即可，如 animation: pulse 1.5s 3; 表示播放 3 次。

五、transition 和 animation 怎么选？

经验法则：交互反馈用 transition，装饰性动画用 animation。

六、性能小贴士

优先动画化 transform 和 opacity，它们由浏览器合成层处理，性能最好；尽量避免动画 width、height、top、left，这些属性会反复触发重排，页面容易卡顿。

小结

• transition 让两个状态平滑过渡，适合悬停等交互反馈
• @keyframes + animation 支持多关键帧、循环与往复，适合复杂动画
• 速度曲线决定"手感"，ease 是最常用的默认值
• 动画优先用 transform 和 opacity，性能更好