本文详解如何通过纯 CSS 实现 hover 时无缝加速的无限轮播效果，避免双动画层导致的视觉跳变，利用 animation-play-state 与嵌套容器结构确保动画状态同步、过渡自然。
本文详解如何通过纯 css 实现 hover 时无缝加速的无限轮播效果，避免双动画层导致的视觉跳变，利用 animation-play-state 与嵌套容器结构确保动画状态同步、过渡自然。
在构建无限滚动轮播（如“移动圆环”效果）时，一个常见误区是直接修改多个并行动画元素的 animation-duration——这会导致浏览器为每个元素重新计算动画时间轴，造成两组动画不同步，从而出现“一层快、一层慢”的闪烁或错位现象（即问题中描述的“另一行圆圈始终快动”的视觉假象）。
根本原因在于：CSS 动画时长变更会重置动画进度，而两个 .first-row 元素彼此独立，无法保证相位一致。
✅ 正确解法是 状态驱动 + 结构隔离：
- 使用单个主动画容器（
.rows）持续运行基础速度动画； - 叠加一个“预备态”加速容器（
.rows-wrapp），初始animation-play-state: paused，且其动画周期更短（更快）； - 利用现代 CSS 选择器
:has(.left:hover)在父容器上监听悬停，并统一控制子动画的播放/暂停状态，确保视觉上只有“同一组内容”在变速，而非切换图层。
以下是精简可复用的核心结构与样式：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); } /* 滚动1/3宽度，适配3行重复 */
}
.moving-circles {
overflow: hidden;
padding: 24px 0;
position: relative;
display: flex;
/* 悬停时：启用加速动画，暂停基础动画 */
&:has(.left:hover) {
.rows-wrapp { animation-play-state: running; }
.rows { animation-play-state: paused; }
}
}
.rows-wrapp {
animation: 5s slide infinite linear paused; /* 加速版：5秒一圈 */
display: flex;
}
.rows {
display: flex;
animation: 10s slide infinite linear; /* 基础版：10秒一圈 */
}
.row {
flex: none;
display: flex;
}
.row a {
display: grid;
place-items: center;
width: 120px;
height: 120px;
margin: 0 44px;
font-size: 40px;
border-radius: 50%;
border: 1px solid;
text-decoration: none;
}
对应 HTML 结构需包含三重冗余行（.row ×3），确保任意时刻至少有一行完整可见，消除滚动缝隙：
<nav class="moving-circles"><div class="left"></div>
<div class="rows-wrapp">
<div class="rows">
<div class="row">
<a href="#">0</a><a href="#">1</a><a href="#">2</a>...<a href="#">9</a>
</div>
<div class="row">
<a href="#">0</a><a href="#">1</a><a href="#">2</a>...<a href="#">9</a>
</div>
<div class="row">
<a href="#">0</a><a href="#">1</a><a href="#">2</a>...<a href="#">9</a>
</div>
</div>
</div>
</nav>
? 关键设计说明：
-
translateX(-33.333%)配合 3 行重复，使每行滚动 1/3 宽度后，下一行恰好接续，形成真正无缝循环； -
:has()伪类提供声明式状态控制，无需 JS 干预，语义清晰、性能更优； - 所有动画均作用于同一 DOM 层级，无 visibility 或 opacity 切换，杜绝渲染抖动；
- 若需兼容旧版浏览器（不支持
:has()），可用轻量 JS 监听 hover 并切换父容器 class（如.hovering），再用.moving-circles.hovering .rows-wrapp替代。
? 总结：无限轮播的变速体验，本质是动画状态的协同管理，而非简单修改 duration。通过结构分层 + 状态驱动 + 多行冗余，即可实现专业级平滑加速效果，兼顾可维护性与跨浏览器鲁棒性。
