如何实现输入框占位符的分步CSS translate动画？先上移再左移

你当前的写法 transform: translateY(-30px) translateX(-100px) 会让两个位移同时生效，所以看不到先上后左的分步效果。要实现顺序动画，必须用 CSS 的 @keyframes 关键帧来拆分两个动作阶段。

完整实现代码 #

HTML 结构

<div class="input-container">
  <input type="text" class="form-input" placeholder="">
  <label class="placeholder-label">请输入内容</label>
</div>

注：原生 input 的 placeholder 难以实现复杂分步动画，用 label 模拟占位符是更灵活的方案。

CSS 样式

.input-container {
  position: relative;
  width: 300px;
  margin: 20px;
}

.form-input {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  background: transparent;
}

.form-input:focus {
  outline: none;
  border-bottom-color: #2196F3;
}

.placeholder-label {
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 16px;
  color: #999;
  pointer-events: none; /* 不干扰输入框聚焦 */
}

/* 聚焦时触发分步动画 */
.form-input:focus + .placeholder-label {
  animation: placeholderMove 0.6s ease forwards;
}

/* 定义关键帧，拆分先上移、再左移的阶段 */
@keyframes placeholderMove {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    /* 前半段仅完成Y轴上移 */
    transform: translateY(-30px) translateX(0);
  }
  100% {
    /* 后半段完成X轴左移，保持Y轴位置 */
    transform: translateY(-30px) translateX(-100px);
  }
}

核心说明 #

• 动画时长设为 0.6 秒，你可以根据需求调整数值（比如改成 0.8s）。
• 如果需要调整两个动作的快慢比例，修改关键帧的百分比即可：比如想让上移更快完成，可把 50% 改成 30%，剩下的 70% 时间用来左移。
• forwards 属性确保动画结束后，占位符保持最终的位移状态，不会回弹。

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