CSS过渡动画不起作用

Question

这是我的代码，我试图在输入框聚焦时使标签浮动，这类似于角度材质动画。我的逻辑成功了，但动画似乎不起作用。

我使用的是纯 CSS 和 HTML。

.space {
  padding: 5px;
  margin-top: 30px;
}
.space .form_input {
  display: inline-block;
}
.space .form_input input {
  border: none;
  border-bottom: solid thin #d6d6d6;
  background: none;
  position: absolute;
  box-shadow: initial;
}
.space .form_input input:focus {
  border: none;
  border-bottom: solid thin #d6d6d6;
  outline: none;
}
.space .form_input input:focus + label {
  transition: all 0.7s ease-out;
  top: -20px;
}
.space .form_input input:valid + label {
  top: -20px;
}
.space .form_input input[value=""] + label {
  border: green;
}
.space .form_input input ~ label {
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  pointer-events: none;
  color: red;
  position: relative;
}

<form class='space'>
	<div class='form_input'>
		<input name='email' id='email' required>
		<label for='email'> Email: </label>
	</div>
</form>

Answer 1

您必须使用...定义动画的初始位置（无焦点）

.space .form_input input ~ label {top: 0;}

.space {
  padding: 5px;
  margin-top: 30px;
}
.space .form_input {
  display: inline-block;
}

.space .form_input input {
  border: none;
  border-bottom: solid thin #d6d6d6;
  background: none;
  position: absolute;
  box-shadow: initial;
}
.space .form_input input:focus {
  border: none;
  border-bottom: solid thin #d6d6d6;
  outline: none;
}
.space .form_input input:focus + label {
  transition: all 0.7s ease-out;
  top: -20px;
}
.space .form_input input:valid + label {
  top: -20px;
}
.space .form_input input[value=""] + label {
  border: green;
}
.space .form_input input ~ label {
  transition: all 0.7s ease-out;
  pointer-events: none;
  color: red;
  position: relative;
  top: 0;
}

<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<form class="space">
  <div class="form_input">
    <input id="email" name="email" required="" />
    <label for="email"> Email: </label>
  </div>
</form>

Answer 2

编织： http://kodeweave.sourceforge.net/editor/#f364e158b2c7212831b82ef2a8460f93

这是另一种方式。您可以将display 标签作为block element 并使用transform 来移动它。

注意：我使用的是Prefix-Free，因此您不必在 CSS 中调用供应商前缀。 （与Normalize 一起用于 CSS 跨浏览器兼容性）

.space {
  padding: 5px;
  margin-top: 30px;
}
.space .form_input {
  display: inline-block;
}
.space .form_input input {
  border: none;
  border-bottom: solid thin #d6d6d6;
  background: none;
  position: absolute;
  box-shadow: initial;
  transition: all 0.7s ease-out;
}
.space .form_input input ~ label {
  transition: all 0.7s ease-out;
  pointer-events: none;
  color: red;
  position: relative;
  display: block;
}
.space .form_input input:focus {
  border: none;
  border-bottom: solid thin #d6d6d6;
  outline: none;
}
.space .form_input input:focus ~ label {
  transform: translate(0,-20px);
}
.space .form_input input:valid + label {
  top: -20px;
}
.space .form_input input[value=""] + label {
  border: green;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<form class="space">
  <div class="form_input">
    <input id="email" name="email" required="" />
    <label for="email"> Email: </label>
  </div>
</form>