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

Question

我正在观看Code School的教程,还有一个关于通过缩放和改变定位来动画元素的教程.

该视频正在为表单内的标签设置动画.当您关注输入字段时,标签(位于输入字段内)移出输入字段,并缩小尺寸.

我想复制 - 没有运气.

我究竟做错了什么？

https://jsfiddle.net/8tvh4x45/1/

编辑:只想添加转换属性,我可以让标签动画,如果我只有一个动画(缩放或translateY) - 但我不能让两者一起工作.

<fieldset class="form-field">
  <input class="form-input" type="text" id="name">
  <label class="form-label" for="name">First Name</label>
</fieldset>

.form-field {
  border: 0;
}

.form-input {
  position: absolute;  
}

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

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

Answer 1

该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.