Объясните, как сделан этот эффект?

Question

[0leg5ergeev]

Объясните, пожалуйста, как сделан эффект на полях ввода, когда плейсхолдер переходит вверх? Желательно с примером, если не сложно

materializecss.com/forms.html

Поля Password и Email

Answer 1

[VisualIdeas]

codepen.io/lewisvrobinson/pen/EyZwjR
codepen.io/sevilayha/pen/IdGKH
Чистый CSS3))

Comments

[Алексей Уколов]

Учитывая, что реализацию можно было посмотреть по ссылке в вопросе, мне кажется, что автор просит объяснить словами, как это работает.

[Алексей Уколов]

Хотя, он в тегах указал React, а в вопросе просит привести пример (а по ссылке его что?)... Кажется, он сам не понял, чего хотел.

Answer 2

[Oogway]

Вот еще статейка:
tympanus.net/Development/TextInputEffects
tympanus.net/codrops/2015/01/08/inspiration-text-i...

Answer 3

[Егор Огурцов]

Это не плейсхолдер, а лейбл, который спозиционирован сверху инпута

Answer 4

[Александр Решетняк]