通过在父元素 hover 时批量修改子元素的 animation-duration，可高效、同步地加快所有已定义动画的子元素播放速度，无需重复声明或 JavaScript 干预。
通过在父元素 hover 时批量修改子元素的 `animation-duration`，可高效、同步地加快所有已定义动画的子元素播放速度，无需重复声明或 javascript 干预。
在 CSS 动画控制中，一个常见需求是：当用户悬停于父容器（如 .m）时，统一提升其所有子元素（.m1–.m4）的动画播放速度，而非各自独立响应 hover——这既能保持视觉一致性，又能避免因逐个绑定 :hover 导致的触发时机错乱与逻辑冗余。
关键在于利用层级选择器 + animation-duration 的可继承式覆盖能力。虽然 animation 是复合属性且不可继承，但 animation-duration 作为独立可动画的长属性，支持在 hover 状态下被精准重设。只需一行 CSS 即可实现全局加速：
.m:hover * {
animation-duration: 0.4s;
}✅ 此写法的作用是：当鼠标进入 .m 区域时，其所有后代元素（*）若已声明 animation，则其持续时间将被强制覆盖为 0.4s；原有 animation-name、animation-timing-function、animation-delay、animation-iteration-count 等均保持不变，仅速率加快。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
animation-duration必须作用于已启用动画的元素本身（即已设置animation-name的元素），否则无效； - 避免使用
.m:hover > *（仅直接子元素），除非你明确只需加速第一层子元素；而*（后代选择器）能覆盖嵌套更深的动画节点； - 若某些子元素需保留原速（如
.m3的模糊光晕效果不宜过快），可单独重置：.m:hover .m3 { animation-duration: 1.8s; /* 恢复默认 */ } - 不要尝试用
transition: all控制animation-duration——它本身不支持过渡动画，仅能硬切换。
? 进阶提示：若需更精细控制（如 hover 时暂停再加速、或叠加新动画），可结合 animation-play-state: paused/running 或自定义 @keyframes 变体，但对本例而言，纯 animation-duration 覆盖是最轻量、最可靠、兼容性最佳（支持 Chrome 43+/Firefox 16+/Safari 9+）的解决方案。
综上，无需 JavaScript、无需重构动画逻辑，仅靠一行语义清晰的 CSS 规则，即可实现“一 hover，全加速”的专业动效体验。
