Как зациклить анимацию фона по оси х?

Question

[Andrey Dontsov]

Доброго дня
Подскажите как зациклить анимацию перемещения фоновой картинки по оси х?
Есть страница, вверху навигация, сразу ниже картинка - фон с облаками
Как сделать плавную анимацию по оси х и зациклить ее?
В результате фон с облаками должен плавно перемещаться по оси х, а картинка (bg_clouds.png) зациклиться
Так облака будут плыть без конца
Сори если что не так, понимаю, что описание то еще
Спасибо

Answer 1

[Андрей]

Согласно этому: css animation background position

можно написать вот так:

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
#animate-area	{ 
	width: 560px; 
	height: 400px; 
	background-image: url(bg-clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;

	animation: animatedBackground 40s linear infinite;
}

Объяснение: создаете бесконечную цикличную анимацию background-position от 0 до 100%

Upd: caniuse.com/#search=keyframes подсказывает, что keyframes нужно дублировать с webkit префиксом, то есть:

@-webkit-keyframes animatedBackground {/* ... */}
@keyframes animatedBackground {/* ... */}
#animate-area	{ 
	/* ... */
	-webkit-animation: animatedBackground 40s linear infinite;
	animation: animatedBackground 40s linear infinite;
}

Comments

[Andrey Dontsov]

Спасибо, Андрей!) все отлично работает)

[Андрей]

AndreyBLG: Да не вопрос) отмечайте решение как правильное, чтобы можно было в следующий раз найти тут в поиске!

[Sloth-invader]

А можно как-то сделать чтобы по истечении 40s бэкгрануд не прыгал на начальную точку а крутился так бесконечно?