如何通过css animation实现文字滚动动画

来源：站长素材作者：日本程序员头衔：程序员

导读：本期聚焦于小伙伴创作的《如何通过css animation实现文字滚动动画》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何通过css animation实现文字滚动动画》有用，将其分享出去将是对创作者最好的鼓励。

CSS animation提供了一种声明式的方式来实现复杂的动画效果，其中文字滚动动画是典型应用之一。不同于传统的JavaScript轮播或setInterval驱动，CSS动画性能更好且代码更简洁。实现原理是使用@keyframes定义关键帧，改变文字容器的transform: translateX()或translateY()属性，配合overflow: hidden裁剪超出内容，利用white-space: nowrap防止文字换行，最终形成连续滚动的视觉错觉。

准备工作：HTML结构

首先需要一个外层容器作为视口，内部包含一个滚动内容层。为了支持无缝循环，通常会将内容复制一份并拼接起来。下面是一个基础结构示例：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <span>这是一段需要滚动的文字，可以包含任何文本内容。</span>
    <span>这是一段需要滚动的文字，可以包含任何文本内容。</span>
  </div>
</div>

外层.scroll-wrapper设定固定宽度和overflow: hidden，内层.scroll-content使用white-space: nowrap并应用动画。为了实现无缝循环，内层中需要包含至少两个相同的内容副本，当第一个副本完全滚出视口时，第二个副本刚好开始显示，形成无限循环。

CSS水平滚动动画实现

定义动画名称scroll-horizontal，动画持续时间、速度曲线和循环次数。关键帧中从translateX(0)移动到translateX(-50%)，因为内层宽度是内容的双倍，所以移动50%恰好让第二个副本到达第一个副本的位置。注意100%关键帧处位移为-50%，这样当动画结束时，视觉上无缝回到起点。

.scroll-wrapper {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 10px 0;
}

.scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-horizontal 8s linear infinite;
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

上述代码中animation: scroll-horizontal 8s linear infinite;表示动画名为scroll-horizontal，持续8秒，匀速，无限循环。通过调整8s可以控制滚动快慢。

垂直滚动动画

垂直滚动原理与水平完全相同，只需改变方向。将translateX替换为translateY，容器高度固定并隐藏溢出。注意垂直滚动时需要保证内层高度是内容的两倍（通过复制实现）。

.scroll-wrapper-vertical {
  height: 40px;
  overflow: hidden;
}

.scroll-content-vertical {
  animation: scroll-vertical 5s linear infinite;
}

@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

HTML结构类似，但内部元素应为块级或内联块级：

<div class="scroll-wrapper-vertical">
  <div class="scroll-content-vertical">
    <p>第一行文字</p>
    <p>第二行文字</p>
    <p>第一行文字</p>
    <p>第二行文字</p>
  </div>
</div>

控制滚动速度与方向

滚动速度通过动画时长控制：数值越小速度越快，反之越慢。若要改变方向，可将translateX(-50%)改为translateX(50%)并调整初始位置，或者使用animation-direction: reverse;属性将动画反向播放。注意反向播放时，0%到100%关键帧顺序不变，但运动方向相反，实际效果为文字向左或向右滚动。推荐直接在关键帧中调整位移值更直观。

添加暂停功能

通过animation-play-state属性控制动画暂停。通常结合:hover伪类实现鼠标悬停时暂停滚动，提升用户体验。

.scroll-content {
  animation: scroll-horizontal 8s linear infinite;
}

.scroll-wrapper:hover .scroll-content {
  animation-play-state: paused;
}

这样当鼠标悬停在容器上时，滚动动画立即暂停，移开后继续滚动。

完整示例代码

下面是一个可直接运行的HTML文件，展示了水平滚动和垂直滚动两种效果，并带有暂停功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS文字滚动动画示例</title>
  <style>
    .container {
      display: flex;
      gap: 30px;
      padding: 20px;
      flex-wrap: wrap;
    }

    .scroll-wrapper {
      width: 400px;
      overflow: hidden;
      border: 1px solid #ddd;
      background: #fafafa;
      padding: 10px 0;
    }

    .scroll-content {
      display: inline-block;
      white-space: nowrap;
      animation: scroll-horizontal 8s linear infinite;
    }

    .scroll-wrapper:hover .scroll-content {
      animation-play-state: paused;
    }

    @keyframes scroll-horizontal {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .scroll-wrapper-vertical {
      width: 200px;
      height: 80px;
      overflow: hidden;
      border: 1px solid #ddd;
      background: #fafafa;
    }

    .scroll-content-vertical p {
      margin: 0;
      padding: 5px 0;
    }

    .scroll-content-vertical {
      animation: scroll-vertical 5s linear infinite;
    }

    .scroll-wrapper-vertical:hover .scroll-content-vertical {
      animation-play-state: paused;
    }

    @keyframes scroll-vertical {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }
  </style>
</head>
<body>
  <h1>CSS文字滚动动画示例</h1>
  <div class="container">
    <div class="scroll-wrapper">
      <div class="scroll-content">
        <span>水平滚动文字 - 欢迎访问ipipp.com </span>
        <span>水平滚动文字 - 欢迎访问ipipp.com </span>
      </div>
    </div>
    <div class="scroll-wrapper-vertical">
      <div class="scroll-content-vertical">
        <p>第一行信息</p>
        <p>第二行通知</p>
        <p>第一行信息</p>
        <p>第二行通知</p>
      </div>
    </div>
  </div>
</body>
</html>

总结

通过CSS animation实现文字滚动动画，仅需少量代码即可达到无缝滚动的效果。关键点在于使用@keyframes定义位移动画，内容复制实现无缝循环，并利用overflow隐藏多余部分。结合hover暂停功能能进一步提升交互体验。这种方法兼容现代浏览器，性能优异，是取代传统JavaScript滚动插件的轻量级方案。你可以自由调整参数，实现不同速度和方向的滚动效果，应用于公告、字幕、轮播等场景。

CSS_animation 文字滚动滚动字幕无限循环动画 text_scroll修改时间：2026-06-08 17:42:30

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。