CSS 动画 #

CSS 动画分为两类：过渡（transition） 和 关键帧动画（animation）。

一、过渡 transition #

| 属性 | 说明 | 示例值 | | transition-property | 要过渡的属性 | all, width, opacity | | transition-duration | 过渡时长 | 0.3s, 300ms | | transition-timing-function | 速度曲线 | ease, linear, ease-in-out | | transition-delay | 延迟时间 | 0s, 0.2s | 简写：transition: <属性> <时长> <曲线> <延迟>;

/* 鼠标悬停时宽度平滑变化 */
.box {
  width: 100px;
  transition: width 0.3s ease;
}
.box:hover {
  width: 200px;
}

二、关键帧动画 animation #

| 属性 | 说明 | 示例值 | | animation-name | 关键帧名称 | slide, fade | | animation-duration | 动画时长 | 1s | | animation-timing-function | 速度曲线 | ease, linear | | animation-delay | 延迟 | 0s | | animation-iteration-count | 播放次数 | 1, infinite | | animation-direction | 方向 | normal, reverse, alternate | | animation-fill-mode | 结束后状态 | forwards（停在最后） | | animation-play-state | 运行/暂停 | running, paused | 简写：animation: <名称> <时长> <曲线> <延迟> <次数> <方向> <填充>;

/* 定义关键帧 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
/* 应用动画 */
.box {
  animation: slide 1s ease-in-out 2 forwards;
}

三、常用动画示例 #

/* 淡入淡出 */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade { animation: fade 0.5s; }
/* 旋转加载 */
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.loader {
  animation: spin 1s linear infinite;
}
/* 脉冲效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.btn:hover { animation: pulse 0.3s; }

四、transition vs animation #

| 对比项 | transition | animation | | 触发方式 | 需要事件（hover、类变化等） | 自动执行（页面加载即开始） | | 循环 | 单次，可反向 | 可无限循环 | | 中间帧控制 | 只能首尾两帧 | 可定义任意多关键帧 | | 脚本控制 | 有限 | 可暂停、重置等 | | 适用场景 | 简单交互反馈 | 复杂连续动画、加载动画 |

五、与 transform 配合建议 #

• 尽量对 transform 和 opacity 做动画，性能好（不触发重排）
• 避免动画 width、height、left/top 等属性（会触发重排）

/* 好 */
.slide {
  transition: transform 0.3s;
}
.slide:hover {
  transform: translateX(10px);
}
/* 差 */
.slide {
  transition: left 0.3s;
}
.slide:hover {
  left: 10px;
}

六、关键速记 #

• 过渡 = 状态 A → 状态 B，需触发
• 关键帧 = 任意时间点控制，自动运行
• 性能：动画 transform + opacity，用 GPU 加速