CSSのみで作るフローティングラベル

JavaScriptを使わず、CSSのみで動くフローティングラベルを作ってみました。
inputフィールドにfocusを当てるとあたかもplaceholderが飛び出すような動きでlabelがアニメーションします。
Chrome、FF、Safariなどのメジャーどころのモダンブラウザの他Edgeでも動いてくれました（IEってなあに？）。

さりげないおしゃれアイテムa.k.a.UXを向上させるマイクロインタラクションとして効果が期待できそうです。

動くサンプル

See the Pen Pure CSS floating label on input field by Hibiki Kudo (@h_kudo) on CodePen.

コードサンプル

index.html

<div class="signup">
  <div class="signup__body">
    <input type="email" id="mail" class="signup__field" placeholder="Your email address" required>
    <label for="mail" class="signup__label">Your email address</label>
  </div>
</div>

style.scss

.signup {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  margin: auto;
  padding: 30px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background-color: #f3f3f3;
}

.signup__body {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

.signup__field {
  font-size: 16px;
  width: 100%;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  &::-webkit-input-placeholder {
    transition: color .15s ease;
    color: #aaa;
  }
  &::-moz-placeholder {
    transition: color .15s ease;
  }
  &:focus {
    &::-webkit-input-placeholder, &::-moz-placeholder {
      transition: color .3s ease;
      color: #fff;
    }
    + .signup__label {
      transform: translateY(-18px);
      opacity: 1;
    }
  }
}

.signup__label {
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 1px;
  transition: all .15s;
  transform: translateY(0);
  opacity: 0;
  color: #666;
}