过渡需状态变化触发，仅支持两态平滑插值；动画独立运行，支持多关键帧、循环及自主控制。判断依据：依赖交互选transition，自动执行选animation。
动画（animation）和过渡（transition）最核心的区别在于：过渡需要状态变化来触发，比如鼠标悬停、类名切换；而动画是独立运行的，只要定义好、启用它，就会按时间轴自动播放，不依赖任何交互或状态改变。
过渡是“状态变化时才动”
transition 描述的是元素从一个状态“平滑变到另一个状态”的过程。它本身不会主动启动，必须靠 CSS 属性值发生改变（比如 hover 改变了 background-color，或 JS 切换了 class）才会生效。
- 必须指定要过渡的属性（如
transition: background-color 0.3s） - 只能在两个明确的状态之间插值（起始值 → 结束值）
- 没有关键帧概念，不能控制中间形态
- 无法循环、无法设定延迟启动（除非用
transition-delay，但仍是响应式触发）
动画是“自己跑，不等人”
animation 是一套独立的时间驱动系统。你用 @keyframes 定义好一串动作（0% → 50% → 100%），再用 animation 属性把它挂到元素上，它就会按计划自动执行——哪怕页面加载完就立刻开始，哪怕没有任何 hover 或 class 变化。
- 不需要状态变化也能运行（比如
animation: spin 2s infinite;一挂上去就转） - 支持多阶段控制（通过
@keyframes精确设置每个时间点的样式） - 可循环（
infinite）、可反向（alternate）、可暂停（animation-play-state） - 能配合 JS 手动控制（如添加/移除 class 启动，但启动后就自运行）
一个直观对比例子
假设让一个按钮背景色从蓝变红再变回蓝：
立即学习“前端免费学习笔记（深入）”；
- 用
transition：只能实现“鼠标放上去变红，拿开变回蓝”，来回只有两帧，且必须靠交互触发 - 用
animation：可以定义三帧——0% 蓝、50% 红、100% 蓝，设成infinite就自动循环闪烁，无需任何操作
怎么快速判断该用哪个？
问自己一个问题：这个动效是不是“等用户做点什么”才开始？
- 是 → 优先考虑
transition（如菜单展开、按钮高亮） - 否 → 用
animation（如加载图标旋转、页面入场动效、背景粒子浮动） - 不确定 → 先写 animation，它更灵活；真要响应状态，也可以用 JS 控制动画的启停（比如 add/remove class 触发动画）
