Question

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

视频正在为表单内的标签设置动画。当您关注输入字段时，标签（位于输入字段内）移出输入字段，并缩小尺寸。

我正在努力复制 - 没有运气。

我做错了什么？

编辑：只是想为transform属性添加它，如果我只有一个动画（scale或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属性的语法无效。在转换多个值时，它们应该用空格分隔（即没有逗号）。 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，以使其成为＆＃34; {{ 3}}＆＃34;

根据transformable：

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

一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素（即inline-block），或者其显示属性计算为table-row，table-row-group，table-header-group，table-footer-group，table-cell或table-caption。

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

1 个答案: