标准答案
- CSS transition 适合 hover、展开收起、颜色和透明度等简单状态过渡。
- CSS animation 适合循环或关键帧明确的动画，例如 loading、提示动效。
- JS 动画适合需要精确控制时间线、暂停恢复、拖拽、滚动联动和复杂物理效果的场景。
- 无论 CSS 还是 JS，都优先动画 transform 和 opacity，避免频繁触发布局。
- 还要尊重 prefers-reduced-motion，给不适合动画的用户减少动效。
题目解析
这题不要只按性能二分。CSS 和 JS 都可能流畅，也都可能写坏。
关键是动画复杂度、可控性、是否需要和用户输入实时联动，以及是否会触发布局。
代码示例
简单进入动画可以直接用 CSS transition。
CSS
.panel {
opacity: 0;
transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease;
}
.panel.is-open {
opacity: 1;
transform: translateY(0);
}常见误区
- 认为 CSS 动画一定比 JS 动画性能好。
- 动画 top、left、width、height，导致布局频繁计算。
- 没有处理减少动态效果偏好，让部分用户感到不适。