不能。浏览器不支持单个元素同时运行多个@keyframes动画，多态切换需通过单个@keyframes分段定义或js动态切换animation-name实现，transition更适合简单状态变化。
多个 @keyframes 动画能否直接叠加触发？
不能。浏览器不支持单个元素同时运行多个 @keyframes 动画（除非用不同 animation-name 且无属性冲突），更不会自动“切换状态”。所谓“多个状态间切换”，本质是：用一个 @keyframes 定义完整时间轴上的多段变化，或通过 JS 控制 animation-name 的动态替换。
如何用单个 @keyframes 实现三态切换（如 idle → hover → active）？
关键在合理划分时间点和状态停留逻辑。比如想让元素默认静止、悬停时缩放+变色、点击时旋转——这些不能靠 CSS 自动感知交互状态，得靠 class 切换驱动动画重播或跳转。
- 把三态拆成 0% → 33% → 66% → 100% 四个关键帧，但需配合
animation-fill-mode: forwards和animation-duration控制每段耗时 - 更实用的做法：定义三个独立
@keyframes（idle-to-hover、hover-to-active、active-to-idle），再用 JS 在 class 变化时重新设置animation-name并触发animation-play-state: running - 注意：直接改
animation-name不会重播动画，需先设为空字符串再设回目标名，或用animation-direction: alternate+animation-iteration-count: 1配合 class 切换强制重启
为什么用 transition 比 keyframes 更适合简单状态切换？
因为 transition 天然响应属性变化，无需预设时间轴。例如按钮的背景色、尺寸、阴影变化，只需写：
.btn {
background: #ccc;
transform: scale(1);
transition: background 0.2s, transform 0.2s;
}
.btn:hover {
background: #007bff;
transform: scale(1.05);
}
.btn:active {
transform: scale(0.98);
}
这样比写三段 keyframes 更轻量、易维护，且无重播逻辑问题。只有需要复杂路径（如贝塞尔曲线位移）、循环中间态或非交互触发的动画，才必须上 @keyframes。
立即学习“前端免费学习笔记（深入）”；
JS 控制 keyframes 切换时最常踩的坑
不是动画没效果，而是浏览器跳过了重绘——因为 animation-name 值未真正“变化”（比如两次都设为 'spin'），或 DOM 属性没触发重排。
- 务必在修改
animation-name前，强制读取一次 layout 属性（如offsetHeight），打破渲染队列合并 - 避免用
setTimeout延迟 0ms 来“等下一帧”，应使用requestAnimationFrame - 如果动画依赖
animation-play-state: paused，记得切回running后手动调用element.getAnimations()[0].play()（部分浏览器需此步） - 移动端 Safari 对连续 keyframes 切换极敏感，建议加
transform: translateZ(0)强制硬件加速
多状态动画的复杂度不在写法，而在状态同步时机——class、动画播放进度、JS 事件监听三者稍有错位，就会卡在中间帧不动。
