应使用 CSS animation-duration 配合 linear timing 实现 hover 加速，避免 marquee；纯 CSS 会重置动画导致跳帧，真无缝需 JS 控制 requestAnimationFrame。
hover 时让 marquee 或滚动动画加速？别用 marquee
HTML5 已废弃 ，现代实现滚动文字必须用 CSS 动画（@keyframes + animation）。直接在 :hover 里改 animation-duration 是可行的，但要注意：浏览器不会自动“加速当前动画”，而是会重置并重新播放——这会导致跳帧或闪动。
正确做法：用 animation-play-state 配合动态 duration
想实现“悬停即加速且不跳帧”，得组合两个控制点：
– 暂停动画（避免重播）
– 缩短持续时间后继续（模拟加速）
但纯 CSS 无法在暂停后“续播并改变 duration”，所以实际更稳的方式是：不暂停，只缩短 animation-duration，并确保 animation-timing-function 是线性的（否则加速感不直观）。
-
animation-timing-function: linear必须设，否则 cubic-bezier 会让速度变化不可控 -
animation-fill-mode: forwards可选，防止动画结束瞬间回跳 - 初始
animation-duration设为 10s，hover 时改为 3s，视觉上就是明显加速
.scroll-text {
animation: scroll-left 10s linear infinite;
}
.scroll-text:hover {
animation-duration: 3s;
}
为什么改 animation-duration 有时没反应？
常见失效原因不是写法错，而是底层机制限制：
- 父容器或自身有
overflow: hidden但宽高未固定，导致动画元素渲染异常 - 使用了
transform: translateX()却忘了加will-change: transform，某些浏览器（尤其 Safari）对频繁 duration 变更响应迟钝 - 动画名重复或被其他规则覆盖（比如用了
!important在非 hover 规则里） - 元素是 inline 级别（如
），未设display: inline-block或white-space: nowrap，导致文字换行打断滚动
需要真正“无缝加速”？得用 JavaScript 补位
CSS 的 animation-duration 切换本质是重置动画，无法继承当前偏移位置。如果业务要求悬停瞬间速率提升、且不能有任何位置跳变（比如金融行情跑马灯），就必须用 JS 控制 requestAnimationFrame + getComputedStyle 读取当前 transform 值，再按新速率插值推进。这时候 CSS 动画就该换成 JS 驱动——不是不能做，而是复杂度跃升。
立即学习“前端免费学习笔记（深入）”；
多数场景下，直接改 animation-duration 已足够；真要零感知加速，就得接受 JS 实现的成本，以及多一层兼容性校验。
