Изменение placeholder при вводе текста в поле

[Delat]

Как делаются такие эффекты, когда при вводе текста placeholder не исчезает, а уменьшается и перемещается в угол. Вот пример с placeholder (слово "email") сместилось при вводе почтового ящика.

[AlexZaw]

Как то так:

<div class="wrap">
  <input id='email' type="text" required>
  <label for="email">E-mail</label>
</div>

.wrap{
  position: relative;
}
input{
  height: 50px;
}
label{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
  transition: top .5s;
}
#email:focus + label{
  top: 5px;
  font-size: 10px;
}

#email:valid + label{
    top: 5px;
    font-size: 10px;
}