How to animate input fields

Learn how to create an animated input form with CSS.

<style>
form {
  margin: 100px;
}
.input-field {
  position: relative;
  width: 250px;
  height: 44px;
  line-height: 44px;
}
label {
  position: absolute;
  top: 0;
  width: 100%;
  color: #d3d3d3;
  transition: 0.2s all;
}
input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  border-bottom: 2px solid red;
}
input:focus,
input:valid {
  border-color: #00dd22;
}
input:focus~label,
input:valid~label {
  top: -24px;
  color: #00dd22;
}

</style>
<form action="">
  <div class="input-field">
    <input type="text" id="name" required />
    <label for="name">Your name:</label>
  </div>
</form>

See the Pen Input field animation by Enrico (@_emattiazzi) on CodePen.