Обратите внимание, что эти эффекты сделаны только для вдохновения; они используют CSS-свойства, которые работают только в современных браузерах.

Демо

В разметке мы используем span в качестве обёртки для input и label. Чтобы эффекты работали, мы ставим label после input, что разрешено только при использовании чекбоксов и радиокнопок. На самом деле в этом нет большой необходимости, если вы будете динамически добавлять определённый класс при фокусе на поле ввода. В этом демо мы использовали псевдокласс :focus, чтобы показать его потенциал при работе с селектором одноуровневых элементов (+).

<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="input-1" />
<label class="input__label input__label--haruki" for="input-1">
<span class="input__label-content input__label-content--haruki">First Name</span>
</label>
</span>

Label — это самый полезный элемент в этом примере. Мы можем использовать псевдоклассы :before и :after, чтобы добавить к нему
какую-либо рамку или фон, которые впоследствии можно изменять — в идеале только используя только те свойства, которые анимируются высокопроизводительно. Мы даже можем создать отдельный слой-оверлей, как мы сделали в эффекте под названием «Kyo»
Первый эффект — «Haruki» — может выглядеть так, будто мы анимируем высоту элемента с рамками, но на самом деле мы анимируем два псевдоэлемента лэйбла, каждый из которых похож на рамку

.input--haruki {
margin: 4em 1em 1em;
}

.input__field--haruki {
padding: 0.4em 0.25em;
width: 100%;
background: transparent;
color: #AFB5BB;
font-size: 1.55em;
}

.input__label--haruki {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
}

.input__label-content--haruki {
transition: transform 0.3s;
}

.input__label--haruki::before,
.input__label--haruki::after {
content: '';
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 4px;
background: #6a7989;
transition: transform 0.3s;
}

.input__label--haruki::before {
top: 0;
}

.input__label--haruki::after {
bottom: 0;
}

.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
transform: translate3d(0, -90%, 0);
}

.input__field--haruki:focus + .input__label--haruki::before,
.input--filled .input__label--haruki::before {
transform: translate3d(0, -0.5em, 0);
}

.input__field--haruki:focus + .input__label--haruki::after,
.input--filled .input__label--haruki::after {
transform: translate3d(0, 0.5em, 0);
}

Обратите внимание на то, что мы задали некоторые базовые стили для обёртки, поля ввода и его лэйбла. При фокусе контент лэйбла смещается вверх, в то время как два псевдоэлемента плавно смещаются вверх и вниз.
В Firefox (на Apple Mac) рендеринг текста не очень красив, поэтому вы можете видеть небольшое размытие текста в конце анимации. Но размытый текст — это проблема не только Firefox. По-настоящему печально, что шрифты рендерятся плохо даже в Chrome. Некоторые размеры шрифта выглядят хорошо при, например, увеличении элемента, а другие размеры уже портятся.
Обратите внимание на то, что SVG-анимация в эффекте «Madoka» не работает в IE. Если вы будете делать собственные эффекты, помните о том, что анимация поля ввода сама по себе является плохой идеей из-за некоторых багов на iOS и в IE.
Проект на GitHub