如何实现输入框文本交替滑动动画及仅溢出时触发效果？

一、实现双向交替流动的跑马灯动画 #

替换原有单向无限滚动的动画，改用双向往返的流动效果，调整CSS代码如下：

/* 兼容主流浏览器的关键帧定义 */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100%));
  }
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  /* 启用双向交替动画 */
  animation: marquee 8s linear infinite alternate;
}

说明：

• 用transform: translateX替代text-indent，动画更流畅且避免布局偏移；
• animation-direction: alternate实现文本从左到右、再从右到左的往返流动；
• 容器必须设置overflow: hidden和white-space: nowrap，保证文本被截断且不换行。

二、优化小屏幕下动画起始表现 #

小屏幕中input字段宽度缩小后，原动画的起始位置会导致文本完全不可见。改用从transform: translateX(0)（文本完全可见的初始状态）开始动画，先向左移动至文本完全移出容器，再反向移动回来，初始状态用户能看到文本开头，体验更自然。

三、仅在文本溢出时触发动画 #

CSS无法直接判断文本是否溢出，需通过JavaScript实现动态判断与类名切换：

1. 编写文本溢出判断函数：

function isTextOverflow(element) {
  // scrollWidth为内容实际宽度，clientWidth为容器可见宽度
  return element.scrollWidth > element.clientWidth;
}

2. 动态切换跑马灯类：

// 替换为你的目标元素选择器（input和span）
const targetElements = document.querySelectorAll('.url-input, .filename-span');

function toggleMarquee() {
  targetElements.forEach(el => {
    if (isTextOverflow(el)) {
      el.classList.add('marquee');
    } else {
      el.classList.remove('marquee');
    }
  });
}

// 页面加载时初始化判断
toggleMarquee();
// 窗口大小变化时重新判断
window.addEventListener('resize', toggleMarquee);

说明：

• 若元素内容宽度大于可见宽度，说明文本被截断，添加marquee类触发动画；反之移除类，恢复正常显示；
• 若元素有内边距，可调整判断逻辑为element.scrollWidth > (element.offsetWidth - element.paddingLeft - element.paddingRight)，避免计算偏差；
• 确保input元素的box-sizing: border-box，保证宽度计算准确。

内容的提问来源于stack exchange，提问作者TryHackX.org