如何实现平滑变速的无限轮播圆圈动画-html教程-PHP中文网

如何实现平滑变速的无限轮播圆圈动画

本文介绍一种纯 CSS 方案，通过 animation-play-state 与嵌套容器控制，解决 hover 时轮播速度突变导致的“双层错位”视觉异常，实现无缝、流畅的加速/减速无限滚动效果。

本文介绍一种纯 css 方案，通过 animation-play-state 与嵌套容器控制，解决 hover 时轮播速度突变导致的“双层错位”视觉异常，实现无缝、流畅的加速/减速无限滚动效果。

在构建无限轮播（infinite carousel）时，一个常见误区是直接修改正在运行的动画的 animation-duration —— 这会导致浏览器强制重置动画状态，引发时间轴错乱。你观察到的“两行圆圈交替显隐”现象，正是由于两个 .first-row 元素各自独立执行不同持续时间的 slide 动画，且起始相位不一致所致：当鼠标悬停时，#one 和 #two 同时被设为 10s，但它们的动画进度不同步；移出后又统一恢复 30s，进一步加剧相位偏移，最终形成视觉撕裂。

正确解法：用「暂停态备用动画」替代「动态改时长」
核心思路是分离「主滚动流」与「加速备份流」：

主 .rows 容器以较慢节奏（如 10s）持续滚动；
备用 .rows-wrapp 容器内嵌相同内容，但预设更快动画（如 5s），初始设为 animation-play-state: paused；
利用 CSS :has() 选择器监听 .left:hover，仅在悬停时启动备用动画，并同时暂停主动画，实现零过渡切换。

以下是精简可复用的完整实现：

<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="#">3</a>
        <a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a>
        <a href="#">8</a><a href="#">9</a>
      </div>
      <div class="row">
        <a href="#">0</a><a href="#">1</a><a href="#">2</a><a href="#">3</a>
        <a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a>
        <a href="#">8</a><a href="#">9</a>
      </div>
      <div class="row">
        <a href="#">0</a><a href="#">1</a><a href="#">2</a><a href="#">3</a>
        <a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a>
        <a href="#">8</a><a href="#">9</a>
      </div>
    </div>
  </div>
</nav>

@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;
  font-size: 40px;
  border-radius: 50%;
  border: 1px solid;
  margin: 0 44px;
  text-decoration: none;
}

✅ 关键设计说明：

使用 translateX(-33.333%) 而非 -100%，因三行 .row 水平拼接，单次滚动需覆盖总宽的 1/3，确保无缝循环；
.rows-wrapp 本身无内容，仅作为动画载体包裹 .rows，避免 DOM 冗余；
:has(.left:hover) 是现代 CSS 的强大能力（Chrome 105+ / Safari 15.4+ / Firefox 121+ 支持），若需兼容旧版，可用 JavaScript 切换 class 实现相同逻辑；
所有 .row 内容完全一致，保证视觉连续性，无需 JS 同步状态。