Input Focus Animation

Saw this on Bungie's website, and wanted to give it a go using only CSS.

by rjschie

HTML

<div class="form">
    <div class="input-group">
        <input id="search" name="search" class="input-group__field" required>
        <label for="search" class="input-group__text">Search:</label>
    </div>
</div>

CSS

html, body {
      padding: 0;
      margin: 0;
      height: 100%;
  }
  body, input {
      font-family: sans-serif;
      font-weight: 100;
      font-size: 16px;
  }
  .form {
      height: 100%;
      padding: 2rem;
      background: teal;
  }
  .input-group__field, .input-group__text {
      transition: all .1s ease-out;
  }
  .input-group {
      background-color: #eee;
      height: 5rem;
      position: relative;
      color: black;
      max-width: 600px;
  }
  .input-group__field {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      height: 100%;
      padding: 20px 10px;
      border: none;
      outline: none;
  }
  .input-group__field:focus, .input-group__field:valid {
      transform: translate(10px, 2rem);
      width: 80%;
      height: 1rem;
      border: 1px solid #ccc;
  }
  .input-group__text {
      position: absolute;
      top: 1.75rem;
      left: 40px;
      z-index: 101;
      font-size: 1.5rem;
      cursor: text;
  }
  .input-group__field:focus + .input-group__text, .input-group__field:valid + .input-group__text {
      top: 10px;
      left: 10px;
      font-size: 1rem;
  }