Как сделать css-анимацию цикличной?

Question

[pashabomber]

Добрый день!

banner.volodin-web.ru
Внутри серого блока находятся два блока, фоном которых заданы картинки:

<div class="slider">
		<div class="block1"></div>
		<div class="block2"></div>
	</div>

slider {
	width: 960px;
	height: 96px;
	margin: 100px auto;
	background: rgba(1,1,1,0.5);
	position: relative;
	overflow: hidden;
}

.block1 {
	width: 294px;
	height: 156px;
	right: -294px;
	top: 50%;
	margin-top: -78px;
	background: url('block1.png');
	position: absolute;
	animation: block1 6s infinite alternate;
	animation-iteration-count: 1;
}

.block2 {
	width: 294px;
	height: 156px;
	right: -294px;
	top: 50%;
	margin-top: -78px;
	background: url('block2.png');
	position: absolute;
	animation: block2 6s infinite alternate;
	animation-iteration-count: 1;
    -webkit-animation-delay: 4.1s, 5.1s;
    -moz-animation-delay: 4.1s, 5.1s;
    -ms-animation-delay: 4.1s, 5.1s;
    animation-delay: 4.1s, 5.1s;
}

@keyframes block1 {
  0%  {
    opacity: 0;
	right: -50px;
  }
  40% {
    opacity: 1;
	right: 0px;
  }
  70% {
	opacity: 0;
	right: -296px;
	transform: scale(0.7);
  }
  100% {
	transform: scale(0);
  }
}

@keyframes block2 {
  0%  {
    opacity: 0;
	right: -50px;
  }
  40% {
    opacity: 1;
	right: 0px;
  }
  70% {
	opacity: 0;
	right: -296px;
	transform: scale(0.7);
  }
  100% {
	transform: scale(0);
  }
}

Сперва появляется первая картинка и исчезает. Потом появляется вторая и так же исчезает.
Задача сделать так, чтобы они циклично появлялись и исчезали также по очереди.

Заранее спасибо!

Answer 1

[HamSter]

пример

Answer 2

[Hoffman_ZZZ]

animation-iteration-count: 1;

вместо 1 поставить infinite