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

Question

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

视频是关于在表单内动画化标签的。当你聚焦在输入字段上时，标签（位于输入字段内部）会移动出输入字段，并缩小尺寸。

我尝试复制这个效果，但没有成功。

我做错了什么？

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

编辑：只想补充说明一下，对于 transform 属性，如果我只有一个动画（缩放或平移），我可以让标签动起来 -- 但是我无法同时让两个动画一起工作。

<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);
}

- user4609276

---

你可以尝试在这里查看代码 http://tympanus.net/Development/TextInputEffects/ - imjared

谢谢，我已经收藏了这个链接。那里有很多很棒的动画。 - user4609276

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），或其display属性计算结果为table-row、table-row-group、table-header-group、table-footer-group、table-cell或table-caption。"

- Josh Crozier