本文介绍如何通过 CSS 实现：当鼠标悬停在父容器上时，动态加快其所有子元素（即使各自拥有不同 @keyframes）的动画播放速度，无需 JavaScript，仅用纯 CSS 选择器与 animation-duration 属性即可精准调控。
本文介绍如何通过 css 实现：当鼠标悬停在父容器上时，动态加快其所有子元素（即使各自拥有不同 @keyframes）的动画播放速度，无需 javascript，仅用纯 css 选择器与 animation-duration 属性即可精准调控。
在实际 UI 动效开发中，常需实现“整体响应式动效”——例如悬停一个卡片容器时，内部多个带独立动画的图标、光晕或浮动元素同步加速，营造 cohesive 的交互反馈。但直接对 .m *:hover 设置动画会导致每个子元素需单独悬停才触发，违背“父级统一控制”的设计意图。
正确解法是利用父级 :hover 状态 + 后代选择器，批量重设子元素的 animation-duration。该属性可独立覆盖原有动画时长，且不影响 animation-name、delay、iteration-count 等其他参数，完美适配各子元素已定义的独特关键帧（如 Pulses1/Pulses2/Pulses3）。
✅ 推荐写法（添加至你的 CSS 底部）：
.m:hover * {
animation-duration: 0.4s;
}
⚠️ 注意事项：
-
animation-duration是可继承的动画属性之一，支持从父级状态中被后代选择器精准覆盖； - 避免使用
.m:hover > *（仅作用于直系子元素），而应使用.m:hover *（作用于所有后代，确保嵌套深层子元素也生效）； - 若某些子元素需保持原速（如背景模糊层
.m3），可单独重置：.m:hover .m3 { animation-duration: 1.8s; /* 恢复原始时长 */ } - 不要混用
transition和animation控制同一属性（如同时对transform设 transition 和 animation），可能导致行为不可预测；本例中transition: all 0.8s对动画元素无实质影响，建议移除或仅保留必要属性（如background-color）。
? 进阶技巧：若需更精细控制（如悬停时暂停再加速），可结合 animation-play-state: paused/running 与 animation-duration 联合使用；但对单纯“提速”场景，animation-duration 是最简洁、兼容性最佳（支持所有现代浏览器及 IE10+）的方案。
最终效果：鼠标移入 .m 区域瞬间，.m1～.m4 的所有动画均以 0.4s 新时长循环播放，节奏紧凑统一，视觉协同感显著增强——真正实现“一触即发，全局响应”。
