如何实现输入框placeholder的打字机式CSS动画？代码未生效

你的代码未生效核心问题有两个：::placeholder 默认是行内元素，不支持 width 属性动画；另外你引用的 blink-caret 动画未定义。以下是修正后的完整实现：

完整代码示例 #

/* 输入框基础样式，方便观测效果 */
.typewriter {
  border: 1px solid #ccc;
  padding: 8px 12px;
  font-size: 16px;
}

.typewriter::placeholder {
  /* 关键：将placeholder转为行内块，支持width动画 */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .15em;
  /* 初始宽度设为0，确保动画从无到有展开 */
  width: 0;
  /* 绑定动画，forwards让动画结束后保持最终状态 */
  animation: typing 3.5s steps(18, end) forwards,
             blink-caret .75s step-end infinite;
}

/* 打字动画：宽度从0过渡到100% */
@keyframes typing {
  to {
    width: 100%;
  }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
  from, to {
    border-right: 2px solid transparent;
  }
  50% {
    border-right: 2px solid #333;
  }
}

<input type="text" class="typewriter" placeholder="这是打字机效果的占位文本">

关键修正说明 #

• 给 ::placeholder 加 display: inline-block：行内元素无法设置宽度，转为行内块后才能触发width动画
• 初始设置 width: 0：保证动画起始状态为文本完全隐藏
• 补充 blink-caret 动画定义：实现模拟光标闪烁的效果
• 动画添加 forwards 属性：让动画结束后保持文本完全显示的状态

若需要循环播放打字效果，可将动画属性调整为 animation: typing 3.5s steps(18, end) infinite alternate, ...，但需注意循环时要重置宽度，可能需要调整动画逻辑。

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