Привет.
Подскажите пожалуйста как правильно зациклить css анимацию?
Три картинки меняют друг друга, поворачиваясь по Y. Проблема в том, что в конце резкое возвращение в начало цикла, т.е. анимация просто начинается с начала, а нужно сделать "петлю".
Для удобства codepen - http://codepen.io/Andrey-m/pen/bpRwEe
Если его посмотреть, все станет понятно, обратите внимание на рывок после конца анимации третьего слайда, происходит как бы рывок в начало на первый.
.banner {
width: 300px;
height: 143px;
border: 1px solid red;
margin: 30px auto;
position: relative;
}
.position {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
padding: 35px 15px;
}
h2 {
font-size: 26px;
background-color: pink;
}
.side1 {
animation: rotate 5s infinite linear;
-webkit-animation: rotate 5s infinite linear;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateY(0deg);
}
20% {
-webkit-transform: rotateY(0deg);
}
30% {
-webkit-transform: rotateY(90deg);
}
40% {
-webkit-transform: rotateY(90deg);
}
60% {
-webkit-transform: rotateY(90deg);
}
80% {
-webkit-transform: rotateY(90deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateY(0deg);
}
20% {
-webkit-transform: rotateY(0deg);
}
30% {
-webkit-transform: rotateY(90deg);
}
40% {
-webkit-transform: rotateY(90deg);
}
60% {
-webkit-transform: rotateY(90deg);
}
80% {
-webkit-transform: rotateY(90deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
.side2 {
animation: rotate2 5s infinite linear;
-webkit-animation: rotate2 5s infinite linear;
}
@-webkit-keyframes rotate2 {
0% {
-webkit-transform: rotateY(90deg);
}
20% {
-webkit-transform: rotateY(90deg);
}
30% {
-webkit-transform: rotateY(90deg);
}
40% {
-webkit-transform: rotateY(0deg);
}
60% {
-webkit-transform: rotateY(0deg);
}
70% {
-webkit-transform: rotateY(90deg);
}
80% {
-webkit-transform: rotateY(90deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
@keyframes rotate2 {
0% {
-webkit-transform: rotateY(90deg);
}
20% {
-webkit-transform: rotateY(90deg);
}
30% {
-webkit-transform: rotateY(90deg);
}
40% {
-webkit-transform: rotateY(0deg);
}
60% {
-webkit-transform: rotateY(0deg);
}
70% {
-webkit-transform: rotateY(90deg);
}
80% {
-webkit-transform: rotateY(90deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
.side3 {
animation: rotate3 5s infinite linear;
-webkit-animation: rotate3 5s infinite linear;
}
@keyframes rotate3 {
0% {
-webkit-transform: rotateY(90deg);
}
0% {
-webkit-transform: rotateY(90deg);
}
20% {
-webkit-transform: rotateY(90deg);
}
40% {
-webkit-transform: rotateY(90deg);
}
60% {
-webkit-transform: rotateY(90deg);
}
70% {
-webkit-transform: rotateY(90deg);
}
80% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
@-webkit-keyframes rotate3 {
0% {
-webkit-transform: rotateY(90deg);
}
0% {
-webkit-transform: rotateY(90deg);
}
20% {
-webkit-transform: rotateY(90deg);
}
40% {
-webkit-transform: rotateY(90deg);
}
60% {
-webkit-transform: rotateY(90deg);
}
70% {
-webkit-transform: rotateY(90deg);
}
80% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
<div class="banner">
<div class="side1 position">
<h2>1111111111111111</h2>
</div>
<div class="side2 position">
<h2>2222222222222222</h2>
</div>
<div class="side3 position">
<h2>3333333333333333</h2>
</div>
</div>
Спасибо!