答案：CSS transition 需结合 transform 和 overflow 才能实现文字滚动。方法一：hover 时用 transform: translateX 改变位置，transition 控制动画；方法二：用 @keyframes 定义从右到左的位移，animation 实现自动循环滚动；方法三：JS 切换类名触发动画状态，实现交互控制。关键点：父容器设 overflow: hidden 和 white-space: nowrap，文本为 inline-block，滚动本质是 transform 位移。transition 适用于状态过渡，持续滚动推荐 animation。
要实现文字滚动的过渡效果，CSS transition 单独使用是不够的，因为它只能平滑地改变属性值，而文字滚动通常涉及位置或裁剪的变化。结合 transform 和 overflow 技术，配合 transition 或 @keyframes 才能实现流畅的滚动效果。以下是几种实用方法。
1. 使用 transform + transition 实现横向滚动（悬停触发）
适用于标题或说明文字在鼠标悬停时从右向左滚动显示。
.container {
width: 200px;
overflow: hidden;
white-space: nowrap;
border: 1px solid #ccc;
}
.text {
display: inline-block;
padding-left: 100%;
transform: translateX(0);
transition: transform 2s ease;
}
.container:hover .text {
transform: translateX(-100%);
}
说明：初始时文字向右偏移出容器，悬停时通过 transform: translateX(-100%) 向左滚动进入视野，transition 控制动画速度和缓动。
2. 使用 CSS 动画实现自动循环滚动
如果希望文字持续滚动，使用 @keyframes 更合适，但也可以和 transition 配合控制启停。
立即学习“前端免费学习笔记（深入）”；
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.text-auto {
display: inline-block;
white-space: nowrap;
animation: scroll 10s linear infinite;
}
这种方式不依赖 transition，但更稳定，适合跑马灯效果。
3. 结合 JavaScript 控制滚动状态（可交互）
用 JavaScript 控制类名切换，让 transition 在不同状态下生效。
// CSS
.text-js {
transform: translateX(0);
transition: transform 3s ease-in-out;
}
.scrolled .text-js {
transform: translateX(-50%);
}
JavaScript 可在特定事件（如页面加载、点击）后添加 .scrolled 类，触发动画。
关键要点总结
- 文字滚动本质是位置变化，需用 transform 或 margin 配合 overflow: hidden
- transition 适合状态间的平滑过渡，比如 hover 触发的滚动
- 持续滚动推荐用 @keyframes + animation
- 确保父容器 white-space: nowrap 防止换行
- inline-block 或 block 的文字块才能被 transform 移动
