HTML/CSS - 如何让表单内的标签动画化？

Question

我正在观看 Code School 上的教程，其中有一个关于通过缩放和更改定位来为元素设置动画的教程。

该视频介绍如何在表单内设置标签动画。当您关注输入字段时，标签(位于输入字段内)移出输入字段，并按比例缩小。

我正在尝试复制——但没有成功。

我做错了什么？

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

编辑:只想为变换属性添加它，如果我只有一个动画(缩放或平移 Y)，我可以让标签动画化——但我不能让两者一起工作。

<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 属性的语法无效。转换多个值时，它们应该用空格分隔(即没有逗号)。 See MDN用于正式语法。

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

Updated Example

.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 以便它为“transformable ”。

根据 the spec :

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element (i.e., inline-block), or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.