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

Question

[Alex Ivanov]

Доброе времени суток!
Подскажите пожалуйста, как можно сделать подобную, бесконечную анимацию?
Чтобы линии по очереди поднимались волной....
Похоже на эту https://codepen.io/MyXoToD/pen/Djnbq


За ранее благодарен!
Спасибо!

Answer 1

[Interface]

Делаете цикличную анимацию изменения высоты блока через keyframes https://www.w3schools.com/cssref/css3_pr_animation...
Каждой полоске ставите свой animation-delay https://www.w3schools.com/cssref/css3_pr_animation...

P. s. так вы же сами и скинули пример того, как это делать. Что у вас не получается?

Comments

[Alex Ivanov]

Просто с анимацией всего лишь второй раз сталкиваюсь.
Про keyframes вообще только наслышан, а на практике 0.
В основном работал с aos css...

А тут вот выпало счастье)))

[Interface]

Alex_vs_Predator, поиграйте с примером с codepen - там не так уж сложно. Понять как работает анимация в нем - дело вечера, думаю. https://learn.javascript.ru/css-transitions - вот еще про анимацию в целом

[Alex Ivanov]

Interface, большое спасибо!
понял теперь куда смотреть)))
буду пробовать!!!