На моем сайте я хочу создать CSS-анимацию, в которой я пытаюсь переворачивать несколько изображений одно за другим с задержкой в 1 секунду, но это не работает.Когда первое изображение переворачивается, второе изображение должно переворачиваться, затем трижды и т. Д.
Как this , но при загрузке. Каждое изображение должно переворачиваться одно за другим.Предположим, что есть 4 изображения 1-е изображение переворачивается с задержкой: 0, затем второе изображение переворачивается с задержкой: 1 и так до четвертого изображения с задержкой: 4
javascript
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.appendChild(arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
}
}, 0, target);
};
var target = document.getElementById("rotator2");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);
}, false);
#stage2 {
margin: 2em auto 1em 50%;
height: 240px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 50%;
-moz-perspective: 1200px;
-moz-perspective-origin: 0 50%;
-ms-perspective: 1200px;
-ms-perspective-origin: 0 50%;
}
#rotator2 a {
position: absolute;
left: -151px;
-moz-transform-style: preserve-3d;
}
#rotator2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#rotator2 a:nth-child(1) img {
-webkit-transform: rotateY(-120deg) translateZ(80px);
-moz-transform: rotateY(-120deg) translateZ(80px);
-ms-transform: rotateY(-120deg) translateZ(80px);
}
#rotator2 a:nth-child(2) img {
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
}
#rotator2 a:nth-child(3) img {
-webkit-transform: rotateY(120deg) translateZ(80px);
-moz-transform: rotateY(120deg) translateZ(80px);
-ms-transform: rotateY(120deg) translateZ(80px);
}
#rotator2 a:nth-child(n+4) {
display: none;
}
@-webkit-keyframes rotator2 {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-120deg);
}
}
@-moz-keyframes rotator2 {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-120deg);
}
}
@-ms-keyframes rotator2 {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(-120deg);
}
}
#rotator2 {
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1s;
-moz-transform-origin: 0 0;
-moz-transform-style: preserve-3d;
-moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-ms-transform-origin: 0 0;
-ms-transform-style: preserve-3d;
-ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-ms-animation-duration: 2s;
-ms-animation-delay: 1s;
}
#rotator2:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
<div id="stage2">
<div id="rotator2" style="-webkit-animation-name: rotator2; -moz-animation-name: rotator2; -ms-animation-name: rotator2;">
<a href="1.jpg"><img src="img/1.jpg" width="280" alt ="1"></a>
<a href="2.jpg"><img src="img/2.jpg" width="280" alt ="2"></a>
<a href="3.jpg"><img src="img/3.jpg" width="280" alt ="3"></a>
<a href="4.jpg"><img src="img/4.jpg" width="280" alt ="4"></a>
<a href="5.jpg"><img src="img/5.jpg" width="280" alt ="5"></a>
<a href="6.jpg"><img src="img/6.jpg" width="280" alt ="6"></a>
<a href="7.jpg"><img src="img/7.jpg" width="280" alt ="7"></a>
<a href="8.jpg"><img src="img/8.jpg" width="280" alt ="8"></a>
</div>
</div>
Здесь 1-е изображение непрерывно переворачивается