Вопрос по анимации, возможно ли вообще такое на CSS?

Question

[massef]

Накидал пример codepen.io/anon/pen/yVdeWZ
Проблема в скачке, когда анимация заканчивается. Наблюдайте 10 секунд.
Пробовал анимировать одним элементом, в фоне которого длинная картинка (6к+px) но и тут скачек возникает.
Я так понимаю сделать без скачка не выйдет?

Думаю можно это без проблем реализовать на JS через SVG или Canvas, могу вытащить в элемент path точки. Но как потом его анимировать не понимаю.
В общем, подскажите какие тут есть подходящие варианты, статьи/примеры/либы приветствуются.

Answer 1

[xmoonlight]

А "гребёнкой" почему бы не сделать? (2 слоя с чередованием)

Comments

[massef]

Не выйдет, пример очень упрощенный, по факту анимировать нужно вот это image.prntscr.com/image/61bc05cf13ea4b99ac101733c4...

[xmoonlight]

massef: ну так надо чтобы пузырьки эти ехали что ли? тогда всё так же, только слой сзади с полоской ставим и всё.

[massef]

xmoonlight типо второй слой вот так наложить? prntscr.com/do9a2r не сообразил, спасибо попробую.

[xmoonlight]

massef: ну да! и совместить на одну линию.
и overflow на один цикл в обе стороны.

[Алексей Струков]

А че анимировать то надо?
Просто чтоб кубы эти пролетали, потом пауза, потом опять они пролетают, и так до бесконечности?

[massef]

xmoonlight не понял про overflow, можно подробней?
Алексей Струков без паузы, бесконечная лента, из макета image.prntscr.com/image/61bc05cf13ea4b99ac101733c4...

[Алексей Струков]

massef: пробовал просто взять эту ленту шириной в экран и анимировать свойство transform: translate(100%)?

[massef]

Алексей Струков Пробовал, когда анимация кончается происходит скачек назад. Или я чего то не понимаю или это нереально сделать. Буду на JS сейчас пробовать

[Алексей Струков]

massef: надо просто аккуратно склеить бэкграунд

[massef]

Алексей Струков как? я уже как только не пробовал, и каплю вырезал и каплю с линией и целиком всю картинку, с повторением и без короче вот что выходит в итоге. codepen.io/anon/pen/GNbGmQ?editors=1100#0

[massef]

Алексей Струков Самый офигенный вариант был с разделением капель на отдельные спаны и запуск анимации для каждого спана с задержкой, все четко без рывков. Но промежуток который создается между каплями благодаря задержке, получается не ровный между первым и последней каплей, т.е. везде как надо 450px а между первой и последней например 200px что не допустимо.

[Алексей Струков]

massef: какая ширина картинки в пикселях?
Не могу с мобилы посмотреть

[Алексей Струков]

massef: в общем на глаз подобрал тебе значение. Подставь там точную ширину картинки в пикселях. Можно сделать анимацию более плавной, но придется использовать другую технику.
codepen.io/anon/pen/xRozyq?editors=1100#0

[massef]

Алексей Струков Тоже допер до такого варианта. Картинок четыре по 5552px и 8061px ))) Нормуль получилось.

[Алексей Струков]

massef: подставь в общем в анимацию эти значения, либо картинки подгони под один размер для простоты