Как можно реализовать анимацию волны по нижней границы инпута?

Question

[konstantinst13]

Доброго времени суток!
Как можно реализовать анимацию волны по нижней границы инпута? Мне нужно чтобы при клике на инпут ввода текста, по его нижней границе "прошла волна".

Вот как у на этом сайте: https://www.cloudmill.ru/contacts/

Меня интересует самый простой, лаконичный способ реализовать это.

Благодарю за внимание.

Comments

[Rustam Bainazarov]

Так вроде бы у вас код доступен для изучения.

Answer 1

[Anton]

Почитайте код по вашей ссылке, вырезал часть их кода и стили.

Анимация выполнена с использованием этого: https://www.npmjs.com/package/react-reveal-animation

интересный момент в html и в cамом конце css

.graphic--nao {
    stroke: #fff;
    pointer-events: none;
    transition: transform 0.7s, stroke 0.7s;
        transition-timing-function: ease, ease;
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
}