Как зациклить css анимацию в петлю ( infinite не подходит )?

Question

[Andrey Dontsov]

Привет!
Подскажите пожалуйста как правильно зациклить css анимацию в loop?

Три картинки меняют друг друга, поворачиваясь по оси Y. Проблема в том, что в конце анимация просто начинается с начала, а нужно сделать "петлю", чтобы за 3-м слайдом снова шел 1-й без скачка с конца анимации в начало.

Для удобства codepen - codepen.io/Andrey-m/pen/bpRwEe

Если его посмотреть, все станет понятно, обратите внимание на рывок после конца анимации третьего слайда, происходит как бы рывок в начало на первый.

"alternate" тоже не совсем то, alternate крутит анимацию в обратном порядке, хотелось бы именно "закольцевать".

Подключать карусель или типа того есть ли смысл, три картинки вертятся по Y, все!
Можно ли это сделать на css?

Answer 1

[Алексей]

В вашем случае примерно так - codepen.io/anon/pen/BKZpva
Только пересчитать интервалы заново.
PS. У меня в FF не работает анимация.

Comments

[Andrey Dontsov]

Спасибо, Алексей!

Answer 2

[Andrey Dontsov]

.side1{
	-webkit-animation: rotate 10s infinite linear;
  
	@-webkit-keyframes rotate{
		0%   { -webkit-transform: rotateY(90deg); }
    5%   { -webkit-transform: rotateY(0deg); }
    30%  { -webkit-transform: rotateY(0deg); }
    35%  { -webkit-transform: rotateY(90deg); }
		100% { -webkit-transform: rotateY(90deg); }
	}
}

.side2{
	-webkit-animation: rotate2 10s infinite linear;
  
	@-webkit-keyframes rotate2{
		0%   { -webkit-transform: rotateY(90deg); }
    35%  { -webkit-transform: rotateY(90deg); }
    40%  { -webkit-transform: rotateY(0deg); }
    65%  { -webkit-transform: rotateY(0deg); }
    70%  { -webkit-transform: rotateY(90deg); }
		100% { -webkit-transform: rotateY(90deg); }
	}
}

.side3{
	-webkit-animation: rotate3 10s infinite linear;
  
	@-webkit-keyframes rotate3{
		0%   { -webkit-transform: rotateY(90deg); }
    70%  { -webkit-transform: rotateY(90deg); }
    75%  { -webkit-transform: rotateY(0deg); }
    95%  { -webkit-transform: rotateY(0deg); }
		100% { -webkit-transform: rotateY(90deg); }
	}
}