Как сделать бегущую строку без остановки и анимировать элементы внутри ее?

Question

[HelpMeeee]

Добрый день!
Делаю слайдер, нашел примеры в гугле и начал делать под себя. Но есть два вопроса, которые я не решил.
1. Как сделать так чтобы бегущая строка была полностью безконечной? (сейчас при окончании 40с есть очень заметный проброс)
2. Мне нужно чтобы первый элемент строки был немного больше остальных, а когда первый элемент уходил с поля видимости стили увеличения анимировано с него уходили и он становился обычного размера, а второй элемент, который встает на его место получил эти стили. (можно ли это сделать чистым css?)

Пример кода https://codepen.io/pen?template=MWNKPEQ
В последующем буду интегрировать этот слайдер в проект на next js

Comments

[szQocks]

ты определись тебе либо строка нужна, либо слайдер, если строка то css, если слайдер - то причём тут строка бегущая, если у тебя элементы какие-то внутри и их анимация ?

тут я делал, вроде она без рывков, может поможет https://codepen.io/kapysta-xxl/pen/XWowEpr

[HelpMeeee]

szQocks, по сути мне не нужен никакой интерактив в этом слайдере, он работает автоматически, как бегущая строка, только с анимированием элементов внутри. Твой код посмотрел, да, он не прирывается ибо у тебя кейфрейм только 0 и 100, если заполнить остальные значения (10-20-30-40) он начнет так же дергаться как у меня.

[HelpMeeee]

HelpMeeee, а я хотел использовать эти значения чтобы выбить время для анимирования элемента

[szQocks]

HelpMeeee, тебе и не нужны эти 10-20-30-40, можно на каждый элемент повесить свою анимацию с задержкой, что бы изначально первый был активен, потом второй и так делее, а саму анимацию бесконечности не трогать вообще, ну это как вариант, я не любитель анимаций на css, поэтому подсказываю хотя бы такой тапорный метод

к пример добавить анимацию на 1 и 2 элемент, но анимация у второго элемент ( задержка перед её началом должна быть равна проигрыванию анимации первого элемента ) то есть анимация на втором элементе должна начаться когда анимация на первом закончиться

[HelpMeeee]

szQocks, я сначала на react делал, но застрял на моменте, который никто не смог помочь решить и решил анимировать на css так как нашел схожий пример. Вот мой прошлый вопрос Анимация бесконечного slider next js, как работать с классами в массиве объектов?

[szQocks]

HelpMeeee, добавь хотя бы кстати скрин дизайна, то как должно быть, что бы отвечающим было понятнее что там такое

[szQocks]

HelpMeeee, ну там же есть ответ вроде как, Алексей что-то там подсказал, но я видел тот вопрос и понял что там пишется что-то на подобии своего слайдера но в того монстра что там написан, вникать не стал увы, сори

[HelpMeeee]

szQocks,
Вот как-то так наверное, если станет понятнее. Сори, но мне нельзя выкладывать фул анимацию с фигмы

[HelpMeeee]

szQocks, по сути он мне сказал читать документацию и собирать теги по другому. А я во всех примерах в гугле только такой способ нашел для слайдера

[szQocks]

HelpMeeee, вроде я понял что это такое ( в голове примерно понял )

тут можно взять свайпер, и сделать ему получается бесконечную анимацию ( без паузы между слайдами ), что бы она была тупо плавной, пример на стеке в ответе там есть пример

а на блоки эти повесить анимации ( ну и подогнать их между друг другом )

в принципе как-то так, попроще варианта не вижу

[szQocks]

HelpMeeee, и кстати, бегущую строку я тут не вижу, чувак

[HelpMeeee]

szQocks, нельзя создавать доп зависимости :(
я со свайпера то и начинал )

[szQocks]

HelpMeeee, пф

тогда вижу вариант через css, сделать 2 блока полностью одинаковых

первый блок - сразу виден
второй блок - он справа от первого блока ( уходит за границы экрана )

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

останется только

а на блоки эти повесить анимации ( ну и подогнать их между друг другом )

на вложенные блоки

[szQocks]

HelpMeeee,

нельзя создавать доп зависимости

это тебе либо дебил посоветовал ( на продакшене, что аж даже свайпер нельзя подключить )

либо это задача как раз таки для того что бы ты учился, вот и учись - сиди делай

[HelpMeeee]

szQocks, https://codepen.io/hurubashi/pen/GRVowYQ есть решение как сделать с фул кейфреймом, получается у меня просто ширина слайдера и размер шага не сходились. Если отталкиваться от этого, то как можно еще отслеживать допустим выполнение кейфрема на 10%?

[HelpMeeee]

szQocks, не думаю, что дебил, слайдер на весь проект один, библа весит 4мб

[szQocks]

HelpMeeee,

Если отталкиваться от этого, то как можно еще отслеживать допустим выполнение кейфрема на 10%?

можно юзать разные переменные на каждом шаге анимации ( но не знаю поможет ли это ) , может ещё какие-то варианты есть - хз

[HelpMeeee]

szQocks, я искал, искал как юзать переменные на каждом шаге кейфрема, но так и не нашел, можешь скинуть линк на пример, пожалуйста!

[szQocks]

HelpMeeee, https://stackoverflow.com/questions/18481550/how-t...

так же можно прямо в стили записать переменную ( в аттрибут style ) и читать её

[HelpMeeee]

szQocks, блин, прочитал всё, но так и не понял как мне использовать это в моем случае?