如何实现文本输入框内占位符文本的滚动过渡效果？

Great question! You’re spot-on about the limitations of the ::placeholder pseudo-element — transform isn’t officially supported for it across all browsers, and even Chrome’s partial static support doesn’t extend to reliable animations. Let’s break down workarounds using properties that are allowed on ::placeholder.

方法1：用text-indent模拟滚动 #

text-indent是::placeholder支持的属性之一，我们可以用它来实现横向滚动效果。核心是计算文本需要向左偏移的距离，让它从输入框开头滚动到末尾。

以下是可运行的示例：

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
}

input::placeholder {
  color: red;
  animation: scrollPlaceholder 4s linear forwards;
}

@keyframes scrollPlaceholder {
  from {
    text-indent: 0;
  }
  to {
    /* 根据你的文本长度调整这个值，代表文本需要左移的距离 */
    text-indent: -80px;
  }
}

<input type="text" placeholder="some really really really long text here">

注意：你需要根据占位符文本超出输入框的实际长度，手动调整动画里的text-indent值。不像transform: translateX(calc(100px - 100%))，纯CSS里没法动态获取::placeholder自身的宽度，所以没法自动计算这个偏移量。

方法2：用padding-left实现滚动 #

另一种思路是通过动态调整占位符的左内边距，把文本“推”出输入框的可视区域：

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
}

input::placeholder {
  color: red;
  animation: scrollWithPadding 4s linear forwards;
}

@keyframes scrollWithPadding {
  from {
    padding-left: 0;
  }
  to {
    /* 同样，根据文本溢出长度调整这个值 */
    padding-left: -80px;
  }
}

<input type="text" placeholder="some really really really long text here">

为什么你最初的transform动画不生效？ #

正如你提到的，CSS规范限制::placeholder只能使用适用于::first-line的属性，而transform不在这个列表里。Chrome对静态transform的部分支持是浏览器的非标准特性，但它不支持transform动画，这就是你最初代码失效的原因。

进阶：用JS动态计算滚动距离 #

如果你的占位符文本长度不固定，可以用JavaScript动态计算精确的滚动距离：

const input = document.querySelector('input');
const placeholderText = input.getAttribute('placeholder');

// 创建一个隐藏的span来测量文本的完整宽度
const tempSpan = document.createElement('span');
tempSpan.textContent = placeholderText;
tempSpan.style.cssText = 'white-space: nowrap; visibility: hidden; position: absolute;';
document.body.appendChild(tempSpan);

const textWidth = tempSpan.offsetWidth;
const inputVisibleWidth = input.offsetWidth - parseInt(getComputedStyle(input).paddingLeft) - parseInt(getComputedStyle(input).paddingRight);
const scrollDistance = inputVisibleWidth - textWidth;

// 通过CSS自定义属性把计算值传递给样式
input.style.setProperty('--scroll-distance', `${scrollDistance}px`);

document.body.removeChild(tempSpan);

然后更新CSS来使用这个自定义属性：

@keyframes scrollPlaceholder {
  from {
    text-indent: 0;
  }
  to {
    text-indent: var(--scroll-distance);
  }
}

内容的提问来源于stack exchange，提问作者Danield