Как сделать бесконечную бегущую ленту из изображения через @keyframes?

Question

[Biff]

Разметка

<div class="lenta">
	<img src="/images/image.jpg" width="1229" height="130" />
</div>

CSS

.lenta {overflow:hidden;}
	.lenta img {display:block;width:1229px;height:130px;animation:imageslider 20s linear infinite;animation-delay:0s;animation-direction:normal;animation-fill-mode:none;}
	@keyframes imageslider {0% {transform:translate(0%, 0);} 100% {transform:translate(-100%, 0);}}

Всё хорошо, но сначала лента из изображения уходит за левый край и после неё остаётся пустое пространство. И лента появляется резко, заполняя весь блок .lenta.

Как сделать так, чтобы лента плавно листалась бесконечно и однородно?

Answer 1

[cssfish]

чтобы при "уходе" картинки влево справа еще она вылезала, надо ее туда добавить :)
т.е. внутрь .lenta надо не одну image поставить, а 2. чтобы они были в одну линию. И все ,анимацию делаем и закольцовываем
пример - вверху справа

Comments

[Biff]

Что-то я в делах завис.
Посмотрю чуть позже.
Пока что оставил через background-image.
Но мне не нравится такой вариант.
Спасибо :)

Answer 2

[ThunderCat]

thenewcode.com/495/Make-A-CSS-Animated-Image-Slider
оно?

Comments

[Biff]

Нет, у меня одна картинка. А тут кода гора)

Answer 3

[pjery3]

https://ru.stackoverflow.com/questions/1362654/%D0...

Comments

[Biff]

Оно, но тут через background-image грузится изображение, а мне надо через тег