无缝滚动动画

  今天看到 icomoon 的顶部的无缝滚动动画感觉蛮有意思的，在 Web 开发中，无缝滚动动画是一种常见的视觉效果，通常用于展示新闻、品牌 Logo 或者图标动画等。本文将使用 HTML 和 CSS 实现该站点的无缝滚动的动画效果。

需求分析

我们希望实现一个图标滚动的效果，确保其滚动过程中没有明显的断点或跳动现象，基本要求如下：

1. 循环滚动：图标持续不断地从左到右、右到左滚动。
2. 视觉无缝：避免滚动时出现明显的间隙或者卡顿。
3. 优化性能：减少浏览器的重绘和回流，确保动画流畅。

代码实现

HTML 结构

使用 div 作为容器，并在其中放置多个 span 元素，每个 span 代表一行滚动的图标。

这里的四个 span 是一样的背景图，只是每个 span 的背景图位置和移动方向不同带来的效果。

<div>
  <span class="s1"></span>
  <span class="s2"></span>
  <span class="s3"></span>
  <span class="s4"></span>
</div>

CSS 样式

核心部分是 CSS 的 @keyframes 动画，使用 transform: translate() 实现滚动，并利用 linear 让动画保持恒定速度。

div {
  width: 80%;
  margin: 0 auto; /* 横向居中 */
  overflow: hidden; /* 避免出现滚动条 */
}

span {
  width: 200em;
  height: 32px;
  margin: 2px 0;
  display: block; /* 让高度生效 */
  background-image: url(./icon.svg);
  will-change: transform; /* 提前让浏览器优化 transform 的计算和渲染 */
}

@keyframes moveToRight {
  0% {
    transform: translate(-49.5em);
  }
  to {
    transform: translate(0);
  }
}

@keyframes moveToLeft {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-49.5em);
  }
}

.s1 {
  animation: moveToRight 120s linear infinite;
}
.s2 {
  animation: moveToLeft 120s linear infinite;
  background-position: 480px 0;
}
.s3 {
  animation: moveToRight 120s linear infinite;
  background-position: 960px 0;
}
.s4 {
  animation: moveToLeft 120s linear infinite;
}

其他代码解析：

1. linear infinite 让动画以恒定速度无限循环播放。
2. will-change: transform 提前通知浏览器优化渲染，减少卡顿。

附 svg 图片：