Реально ли на css?

Question

[Александр Пупкин]

Можно ли сделать такое на css? Может кто где нибудь встречал...



Ну типо как ритм сердцебиения =)

Зеленая полоска бегает до конца и снова с начало =\

Comments

[Kuat Mustafin]

Можно с помощью SVG + CSS

Answer 1

[Николай]

Вполне реально, при помощи svg.
https://css-tricks.com/animating-svg-css/
Посмотрите эту статью, тут расказано как делать анимированные SVG при помощи css.

Comments

[Дмитрий]

упс. согласен....

[Александр Пупкин]

спасибо, гляну. я так понимаю делаешь в Illustrator каркас и через animate задаешь background.

[Николай]

Александр Пупкин: да, в вашем случае просто делаете path и под ним двигаете background animate-ом.

Answer 2

[Дмитрий]

без js имхо нет.

Answer 3

[Даниил Игоревич]

Если на чистом CSS попробовать, то есть вариант создать множество таких зелёных полос, правильно расположить и запускать в тот момент, когда предыдущая полоса дойдёт до точки, с которой начинается эта полоса, и увеличивать с нулевой до ширины до нужной, но такой вариант ещё едва возможен, когда ваш ритм содержит малое количество колебаний, а когда их уже больше, то лучше присмотреться к SVG, как написали в ответе выше. Вообще, по-моему, лучше сразу использовать SVG.