CSS 动画：transition、animation 与性能取舍

transition：状态之间的过渡

适合两个状态之间的插值，由状态变化触发（hover、class 切换）：

.btn {
  opacity: 1;
  transition: opacity 0.3s ease; /* 属性 时长 缓动 */
}
.btn:hover { opacity: 0.7; }

简写完整形式：transition: property duration timing-function delay。过渡只能定义起止，无法中间插入关键帧，且需要触发条件，页面加载时不会自动播放。

@keyframes：完整动画

适合复杂、自动、可循环的动画：

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeUp 0.6s ease-out both; /* both：保留结束状态 */
}

多关键帧用百分比：0% { } 50% { } 100% { }。常用属性：

• animation-iteration-count: infinite：循环
• animation-direction: alternate：往返播放
• animation-fill-mode: forwards/backwards/both：播放前后应用哪一帧的样式
• animation-delay：延迟开始（负 delay 可让动画从中间开始，做交错动画时配合 inline style 很有用）

缓动函数

• 关键字：ease、linear、ease-in-out
• 贝塞尔曲线：cubic-bezier(0.34, 1.56, 0.64, 1)，控制点超出范围能制造回弹感
• steps(n)：不插值，跳变式执行——打字机效果、精灵图逐帧动画的利器：

.typing { animation: typing 2s steps(8) forwards; width: 0; }

性能取舍

记住那条铁律：只动画 transform 和 opacity，它们走合成线程；动画 width/top/color 会触发重排重绘。配合：

.animated { will-change: transform; } /* 提前告知浏览器提升合成层，但别全局滥用 */

JS 动画（requestAnimationFrame / GSAP / Web Animations API）适合：需要物理引擎、复杂时间线编排、随时暂停/反向、与滚动深度联动的场景。简单交互动画优先 CSS——声明式、可被浏览器优化。

可访问性

尊重用户的"减少动态效果"系统设置：

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

大幅位移动画可能引发前庭不适，这个媒体查询是专业与体贴的体现。