核心概念与基础布局
实现溢出文本的动态滚动动画，首先需要正确设置元素的布局和尺寸。当一个元素设置了max-width和overflow: hidden时，其内部文本如果过长，就会被截断。为了让动画能够准确计算溢出量并进行平移，我们需要确保容器和文本元素能够正确地报告其宽度。
HTML结构示例：
<div class="animated-container">
<h3 class="animated-text">
一些短文本
</h3>
</div>
<span>此文本不应动画</span>
<br><br><br>
<div class="animated-container">
<h3 class="animated-text">
一些很长且需要动画才能完整显示的文本内容
</h3>
</div>
<span>此文本应动画以显示全部内容</span>CSS基础样式：
为了让文本在超出容器时能够正确溢出，并为动画提供一个稳定的基准，我们需要对容器和文本元素进行以下设置：
.animated-container {
position: relative; /* 为内部的绝对定位或相对定位提供参照 */
white-space: nowrap; /* 确保文本不换行，从而产生溢出 */
max-width: 200px; /* 容器的最大宽度，用于限制文本显示区域 */
overflow: hidden; /* 隐藏溢出内容 */
background: #0c0c0c; /* 背景色，方便观察 */
display: inline-block; /* 允许设置宽度，并使其宽度适应内容（在max-width限制下） */
width: fit-content; /* 宽度适应内容，但受max-width限制 */
}
.animated-text {
color: #fff; /* 文本颜色 */
animation: backAndForth 5s linear infinite; /* 应用动画 */
display: inline-block; /* 允许设置宽度，并使其宽度适应内容 */
position: relative; /* 为动画的transform和left属性提供定位上下文 */
}关键点解释：
立即学习“前端免费学习笔记（深入）”；
- white-space: nowrap;：这是实现文本溢出的关键，它强制文本在单行显示。
- max-width：定义了容器可以占据的最大宽度。
- overflow: hidden;：隐藏了超出max-width部分的文本。
- display: inline-block;：使容器和文本元素都能响应宽度设置，并且width: fit-content能够正确计算其内容的实际宽度。
- width: fit-content;：让.animated-container的宽度在不超过max-width的前提下，尽可能地包裹其内容。
实现动态滚动动画
动画的核心在于@keyframes规则，它定义了文本在不同时间点的样式。为了实现文本的左右平移，我们将同时使用transform: translateX()和left属性。
动画原理：
当文本溢出时，我们希望它从初始位置（最左侧）向左移动，直到最右侧可见，然后停止一段时间，再向右移回初始位置。
- transform: translateX()：用于元素的相对位移，相对于元素自身当前位置。
- left：用于元素的绝对定位，相对于其定位上下文（在这里是.animated-container）。
通过巧妙地结合这两个属性，我们可以实现一个动态的滚动效果。当文本需要向左移动时，translateX会将其自身向左推，而left会将其定位点向右推。对于溢出文本，这种组合可以确保文本的可见部分在容器内平滑移动。
CSS动画代码：
@keyframes backAndForth {
0% {
transform: translateX(0); /* 初始位置，无位移 */
left: 0; /* 初始左侧定位 */
}
10% {
transform: translateX(0); /* 保持初始位置一段时间 */
left: 0;
}
45% {
/* 核心：计算溢出量并平移 */
/* translateX(-100%) 将文本自身向左移动其自身宽度的100% */
/* left: 100% 将文本的定位点移动到容器的右侧边缘 */
/* 结合起来，实现了文本的“右对齐”效果，将溢出部分移入视图 */
transform: translateX(calc(-100%));
left: 100%;
}
55% {
transform: translateX(calc(-100%)); /* 保持在最右侧可见位置一段时间 */
left: 100%;
}
90% {
transform: translateX(0); /* 移回初始位置 */
left: 0;
}
100% {
transform: translateX(0); /* 循环结束，回到初始位置 */
left: 0;
}
}动画详解：
- 0% - 10%: 文本保持在最左侧，无位移。
-
10% - 45%: 文本从左侧平滑移动到右侧。
- transform: translateX(calc(-100%))：这会将文本元素向左移动其自身宽度的100%。例如，如果文本宽300px，容器宽200px，它会向左移动300px。
- left: 100%：这会将文本元素的左边缘定位到其父容器的右边缘。
- 这两个属性的结合是关键。当文本溢出时，left: 100%将文本的起点推到容器右侧，而translateX(-100%)则将文本的实际显示部分拉回到容器左侧，从而使得文本的右侧部分变得可见。对于不溢出的短文本，其宽度小于容器，left: 100%和translateX(-100%)的组合会使文本的右边缘与容器的右边缘对
