transition适用于一次性交互状态变化，需明确起止样式；animation适合循环或复杂时序，支持关键帧与播放控制；二者可协同但同属性不叠加，性能上transition在transform/opacity更优。
用 transition 实现一次性状态变化
当元素从一种样式平滑切换到另一种（比如 hover 时变色、菜单展开），且只发生一次、不重复，transition 是更轻量、更合适的选择。它依赖属性值的“变化触发”，没有独立的时间轴控制。
常见错误是给未声明初始样式的元素加 transition，结果动画不生效——必须确保起始和结束状态都明确设置了可过渡的属性（如 color、transform、opacity）。
-
transition只在 CSS 属性值真正改变时启动，比如通过:hover、class切换或 JS 修改style - 不支持关键帧，无法定义中间状态；想控制多个阶段需配合多个 class 或 JS 配合
- 性能较好：浏览器对
transition的优化成熟，尤其在transform和opacity上能走合成层 - 示例：
button { background: #007bff; transition: background 0.3s ease, transform 0.2s ease; } button:hover { background: #0056b3; transform: scale(1.05); }
用 @keyframes + animation 实现循环或复杂时序
需要自动播放、循环执行、定义多段中间状态（比如加载 spinner、打字效果、路径移动），就必须用 @keyframes 配合 animation。它不依赖外部触发，有完整的时间轴和播放控制能力。
容易踩的坑是忘记设置 animation-fill-mode，导致动画结束后元素样式回退到初始值，破坏交互状态。
立即学习“前端免费学习笔记（深入）”；
-
animation可设infinite、alternate、iteration-count等，天然支持循环 - 支持百分比关键帧（
0%、50%、100%），能精细控制每一帧的属性值 - 注意兼容性：老版 Safari 需要
-webkit-前缀；IE10+ 支持标准语法 - 示例：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading { animation: spin 1s linear infinite; }
两者不能混用？其实可以协同工作
过渡和动画不是非此即彼的关系。实际项目中常让 animation 负责“自主循环部分”（如图标旋转），再用 transition 处理“用户交互引发的状态衔接”（如整个卡片 hover 时提升 z-index 或阴影）。
关键点在于：CSS 动画会覆盖同名属性的 transition 效果。比如同时对 transform 设置了 animation 和 transition，动画运行期间 transition 不会介入。
- 若需“动画结束后再过渡到新状态”，可在
animationend事件中添加 class 触发 transition - 避免对同一属性（如
left和transform）同时做动画和过渡，易导致跳变或失效 - 用
will-change: transform提前提示浏览器优化，尤其在动画频繁的场景下
性能与可维护性的隐性成本
选错方案最直接的代价不是写不出来，而是后续难调试、难复用、难交接。比如用 animation 实现一个简单的按钮悬停，后期要改成点击后才动，就得重写逻辑；而用 transition 只需改触发方式。
另一个常被忽略的点是：动画帧率受主线程影响，JS 长任务会卡住 animation，但 transition 在 transform/opacity 上多数能走独立合成线程，更稳。
- 移动端慎用
top/left动画，强制重排；优先用transform: translateY() - 大量使用
animation时，建议用prefers-reduced-motion媒体查询降级 - 过渡时间别统一写
0.3s，不同动作该快则快（如 feedback 提示 0.1s），该缓则缓（如模态框入场 0.4s）
