HTML/CSS - 如何将表单内的标签设置为动画？

该transform属性的语法无效.转换多个值时,它们应该用空格分隔(即没有逗号).有关正式语法,请参阅MDN.

因此,您需要删除逗号transform: scale(0.8), translateY(50px).

更新的示例

.form-input + .form-label {
  position: relative;
  transition: transform 1s;
  display: inline-block;
}

.form-input:focus + .form-label {
  transform: scale(0.8) translateY(50px);
}

作为旁注,为了使其在浏览器中工作,您可能还需要display将元素更改inline-block为"可转换 ".

根据规格:

可转换元素是以下类别之一的元素:

一个元件,其布局由CSS盒模型,其可以是一个块级或管辖原子行内元素(即,inline-block),或其显示属性计算到table-row,table-row-group,table-header-group,table-footer-group,table-cell,或table-caption.