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

Question

[IIIu6ko]

Как сделать чтобы изображение двигалось само за собой?
Как здесь logomotor.ru/banner/index.html

Answer 1

[Максим Тимофеев]

Добавляете картинку над блоком, анимируете, когда ее верх равняется с верхом блока запускаете туже логику. Там же в примере все скрипты через инспектор кода видно.

Comments

[IIIu6ko]

Как её добавить над блоком? Анимировать как? Всё с помощью js или можно css?
Я щас пробовал, ничего не получалось. + я так понял нужен бесконечный цикл или тип того.
Можете хотя бы что-то набросать?

[Максим Тимофеев]

IIIu6ko, если в css - надо будет склеить две одинаковые картинки. И анимировать их свойство top. Почитайте про keyframe и animation
Но можно и кучей других способов: js, js+css, svg, svg+js, canvas и т.д.

[IIIu6ko]

Максим Тимофеев, Предположим через css. Как сделать так, чтобы анимация была бесшовная?
https://codepen.io/anon/pen/oEVMYY

[Максим Тимофеев]

IIIu6ko,
я же писал, что для этого надо 2 картинки:
https://codepen.io/wokster/pen/BYEype

Answer 2

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

animation-iteration-count: infinite;

Comments

[IIIu6ko]

Как реализовать чтобы бесшовная анимация была? Таким способом она всегда будет сначала начинаться.