关键帧动画适用于复杂多阶段动效，通过@keyframes定义过程，如元素滑入；过渡动画用于响应交互状态变化，如悬停变色；两者协同使用可提升体验，建议用transform和opacity优化性能，避免同一属性冲突。
关键帧动画（@keyframes）和过渡动画（transition）是CSS中实现视觉动效的两种核心方式。它们各有特点，合理结合使用可以提升用户体验又不牺牲性能。
关键帧动画：控制复杂运动过程
关键帧动画适合定义多阶段、精细控制的动画流程。通过 @keyframes 规则设定动画在不同时间点的状态。
示例格式：
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
将动画绑定到元素：
.animated-box {
animation: slideIn 1s ease-in-out forwards;
}
- animation 属性可设置动画名称、时长、缓动函数和是否保持最终状态（forwards）
- 适用于入场、循环提示、路径移动等复杂场景
过渡动画：响应状态变化的平滑切换
过渡更适合处理用户交互引发的属性变化，比如悬停、点击等。它不需要定义关键帧，只需声明哪些属性在变化时需要动画。
立即学习“前端免费学习笔记（深入）”；
示例格式：
.button {
background-color: #007bff;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
- 只对属性值改变生效，如颜色、尺寸、透明度等
- 写在初始样式中，浏览器自动捕捉变化并插值动画
- 轻量高效，适合按钮、菜单展开等简单反馈
综合应用建议
实际开发中，两者常协同工作。例如用过渡处理交互反馈，用关键帧实现初始化动效。
- 页面加载时，元素从侧边滑入（@keyframes）
- 用户悬停按钮时，背景渐变+轻微放大（transition）
- 弹窗出现用关键帧动画控制入场轨迹，关闭时用过渡淡出
避免同时对同一属性使用两种机制，防止冲突。比如已在 transition 中设置了 transform 动画，就不要再让关键帧频繁修改 transform，否则可能造成卡顿或跳帧。
性能与兼容性提醒
优先使用 transform 和 opacity 实现动画，这两者由GPU加速，性能更好。
- 尽量不用 left/top 改变位置，改用 transform: translate()
- 动画过程中避免触发重排（reflow），减少 layout 开销
- 现代浏览器均支持 transition 和 @keyframes，IE10+ 基本可用
基本上就这些。掌握两者的适用边界，能让界面动效既流畅又有层次感。
