Как сделать плавный анимированный задний фон у сайта?

Question

[wowastrom]

Суть вопроса такая, на заднем воне должны плавно в верх лететь элементы (мелкие рисунки типа font-awesome) примерно как по этой ссылке https://codepen.io/subz/pen/GgPrJP. Код я взял от туда же, только анимацию запустил с низу в верх. Проблема в том что тут используется изображение 400px на 400px и соответственно оно повторяется, заполняя весь вон, но необходимо, чтобы некоторые элементы изображения (более тёмные) были всегда по бокам логотипа, который в центре. Первое, что пришло в голову, взять изображение по больше (под размер экрана), чтобы весь фон заполняло, отцентровать его и при уменьшении экрана, уменьшать и изображение, но при большом изображении начинает дёргаться анимация. Видно как она перезапускается. Соответственно и возникает вопрос, как сделать анимацию плавнее, правильно ли я вообще это делаю, может лучше воспользоваться другим методом, там например эти изображения отдельно как-то добавлять и выводить ?

Comments

[Анатолий]

Ваш код в студию.

Answer 1

[Айнур Валиев]

делаешь похожий паттерн. Позиционируешь его. Задаешь ему скорость анимации
-webkit-animation: slide 300s linear infinite;