CSS中left和top过渡失效但font-size过渡正常的问题排查

• .inputLabel初始状态仅通过place-self: center实现居中，但未显式设置top和left的初始值，这两个属性的默认值为auto。
• CSS过渡要求属性必须有明确的起始值和结束值，auto与具体百分比（如-70%、-40%）之间无法计算过渡动画，因此浏览器直接跳转到目标位置，仅font-size因有明确初始值（var(--text-article-2)）能正常过渡。

修改.inputLabel的CSS，添加top: 0和left: 0作为初始值，确保过渡有明确的起始状态：

.inputLabel{
  grid-area: 1/1/2/2;
  font-size: var(--text-article-2);
  pointer-events: none;
  place-self: center;
  position: relative;
  /* 添加初始的top和left值 */
  top: 0;
  left: 0;
  transition:
    font-size 200ms ease-in,
    top 200ms ease-in,
    left 200ms ease-in;
}

调整后，top和left就能从0平滑过渡到目标的-70%和-40%，实现预期的浮动动画效果。若希望标签更贴合输入框左上角，可微调目标位置的百分比（比如将left: -40%改为-35%），具体根据实际布局调整。

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