Как добавить анимацию на поле ввода?

Question

[Newer123]

Есть вот такие поля ввода - Сodepen и для надписей (labels) надо добавить анимацию при фокусе на поле.
Что-то подобное уже добавил в коде, но все же анимация не такая плавная как в примере:


Подскажите, пожалуйста, как добавить такую плавную анимацию показанную выше?

Answer 1

[Rsa97]

Comments

[Newer123]

Спасибо большое! :)

Answer 2

[andand44]

Плавная анимация будет, если анимировать правило top. Изначально top не задан у .block-criteria label, поэтому нечего анимировать.

Исправленный код с плавной анимацией. Убран bottom, добавлен top

.block-criteria label {
    font-size: 14px;
    color: #c4c4c4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
}

.block-criteria__form:focus + label {
    font-size: 12px;
    bottom: initial;
    top: -20px;
    transition: all 0.3s ease-out;
}

Answer 3

[Алексей Абрамов]

Вариант с hover - эффектом JSFiddle

Answer 4

[Ruslan]

через js если то по фокусу инпута поднимай текст(в белой рамке) и меняй размер. А так лучше наверно с gsap побаловаться