在我的网站中，我想创建一个 CSS 动画，我试图在延迟 1 秒后一个接一个地翻转多个图像，但它不起作用。当第一个图像翻转时，第二个图像应该翻转然后第三个，依此类推
像这样但是在加载时，每个图像都应该一个接一个地翻转。假设有 4 个图像，第一个图像以延迟：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>这里第一张图片不断翻转