如何为text-align属性设置过渡延迟？实现宽度过渡后修改文本对齐

你的需求是让输入框在鼠标悬停时，先完成宽度的过渡动画，再切换text-align属性。问题出在你给input:hover单独定义的transition覆盖了初始状态中text-align的延迟设置，导致它没有等待宽度过渡就直接变化了。

修复后的代码 #

div {
  height: 3rem;
  width: 100%;
  background-color: skyblue;
  position: relative;
}
input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: right;
  width: 10rem;
  /* 初始状态：宽度过渡300ms，text-align延迟300ms变化 */
  transition: width 300ms, text-align 0s 300ms;
}
input:hover {
  width: 100%;
  text-align: left;
  /* 悬停时保留text-align的延迟设置，不覆盖 */
  transition: width 300ms, text-align 0s 300ms;
}
/* 可选：鼠标移出时同样延迟text-align的变化，保持交互一致 */
input:not(:hover) {
  transition: width 300ms, text-align 0s 300ms;
}

<div>
  <input type="text" placeholder="search">
</div>

关键说明 #

• 核心是不要在hover状态下覆盖掉text-align的过渡延迟设置，确保悬停时text-align的变化会等待300ms（也就是宽度过渡的时长）后才触发。
• 加入input:not(:hover)的过渡设置是为了优化反向交互：当鼠标移出时，输入框先缩回到原宽度，再把文字对齐改回右侧，避免视觉突兀。

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