能，但必须用animation简写语法一次性声明多个动画并严格对齐参数顺序；逗号分隔动画名是唯一合法叠加方式，漏参数会导致错位，transform属性后声明者强制覆盖，纯CSS不支持自动序列播放。
能，但必须用 animation 简写语法一次性声明多个动画，并严格对齐参数顺序；直接重复写 animation-name 或拆开写单个属性只会覆盖，不会叠加。
animation 简写中逗号分隔多个动画名是唯一合法叠加方式
浏览器只认 animation: name1 dur1, name2 dur2, name3 dur3; 这种写法。它会把每个逗号分隔的片段当作一个独立动画层，按顺序匹配后续所有 animation 子属性（animation-duration、animation-delay 等）。
- 错误写法：
animation-name: fade; animation-name: slide;→ 后者完全覆盖前者 - 危险写法：
animation: fade 0.3s; animation: slide 0.5s;→ 第二条声明覆盖整条animation，第一个动画丢失 - 正确写法：
animation: fade 0.3s, slide 0.5s ease-out 0.1s, pulse 2s infinite; - 漏参数会导致错位：比如写了 3 个动画名，但只配了 2 个
animation-iteration-count值，浏览器会循环复用第二个值给第三个动画
transform 属性冲突时后声明者强制覆盖
多个动画同时改 transform，不是相加或混合，而是 CSS 层叠规则生效——后写的动画里定义的 transform 值，会彻底替换掉前面动画设置的值。
- 两个动画都含
transform: translateX(10px)和transform: rotate(45deg)→ 只有第二个生效 - 想让位移+旋转同步发生，必须写在同一个
@keyframes里，例如transform: translateX(20px) rotate(10deg) scale(1.2); - 可安全并行的组合：一个动画动
transform，另一个动opacity或filter，互不干扰 - 调试时用 Chrome DevTools 的 “Animations” 面板要手动点开
animation属性展开，否则只显示第一个动画
需要序列播放（A完播B）就得靠 JS 或 animation-delay 精算
CSS 本身不支持“动画 A 结束后自动触发动画 B”，所谓“序列”只能靠时间对齐硬控，或交由 JS 监听 animationend 事件来切换类名。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 序列示例：
animation: fade 0.3s, slide 0.5s 0.3s, zoom 0.4s 0.8s;→ 第二个动画延迟等于第一个时长，第三个延迟等于前两个之和 - 延迟一旦算错（比如漏掉毫秒级误差），视觉上就会出现“卡顿”或“跳变”
- Animate.css 类库不能直接堆多个类：
class="animate__fadeIn animate__slideInUp"→ 所有动画同时启动，且可能因缺少animate__animated基类而失效 - 真正可控的序列推荐用
data-step+ CSS 变量驱动，JS 只改属性，CSS 响应不同状态，避免 class 冲突与时序漂移
最易被忽略的是参数数量对齐和 transform 覆盖逻辑——写三个动画名却只配两个时长，或者以为两个 rotate 动画能叠加出复合旋转，结果全是静止的。动手前先数清楚逗号个数，再逐项填满对应参数，比反复刷新页面试错快得多。
