我已经编写了这个html代码，使用淡入淡出的动画将一个图像打印到另一个图像上，但是在输出图像打印之前，上一个图像完全消失了，所以请告诉我代码中的问题是什么？
<!doctype html>
<html>
<head>
<title>Interactive Alphabet Learning</title>
<style>
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 156s linear infinite 0s;
-moz-animation: imageAnimation 156s linear infinite 0s;
-o-animation: imageAnimation 156s linear infinite 0s;
-ms-animation: imageAnimation 156s linear infinite 0s;
animation: imageAnimation 156s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(6) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#crossfade > img:nth-child(7) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
#crossfade > img:nth-child(8) {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
#crossfade > img:nth-child(9) {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
#crossfade > img:nth-child(10) {
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
#crossfade > img:nth-child(11) {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
#crossfade > img:nth-child(12) {
-webkit-animation-delay: 66s;
-moz-animation-delay: 66s;
-o-animation-delay: 66s;
-ms-animation-delay: 66s;
animation-delay: 66s;
}
#crossfade > img:nth-child(13) {
-webkit-animation-delay: 72s;
-moz-animation-delay: 72s;
-o-animation-delay: 72s;
-ms-animation-delay: 72s;
animation-delay: 72s;
}
#crossfade > img:nth-child(14) {
-webkit-animation-delay: 78s;
-moz-animation-delay: 78s;
-o-animation-delay: 78s;
-ms-animation-delay: 78s;
animation-delay: 78s;
}
#crossfade > img:nth-child(15) {
-webkit-animation-delay: 84s;
-moz-animation-delay: 84s;
-o-animation-delay: 84s;
-ms-animation-delay: 84s;
animation-delay: 84s;
}
#crossfade > img:nth-child(16) {
-webkit-animation-delay: 90s;
-moz-animation-delay: 90s;
-o-animation-delay: 90s;
-ms-animation-delay: 90s;
animation-delay: 90s;
}
#crossfade > img:nth-child(17) {
-webkit-animation-delay: 96s;
-moz-animation-delay: 96s;
-o-animation-delay: 96s;
-ms-animation-delay: 96s;
animation-delay: 96s;
}
#crossfade > img:nth-child(18) {
-webkit-animation-delay: 102s;
-moz-animation-delay: 102s;
-o-animation-delay: 102s;
-ms-animation-delay: 102s;
animation-delay: 102s;
}
#crossfade > img:nth-child(19) {
-webkit-animation-delay: 108s;
-moz-animation-delay: 108s;
-o-animation-delay: 108s;
-ms-animation-delay: 108s;
animation-delay: 108s;
}
#crossfade > img:nth-child(20) {
-webkit-animation-delay: 114s;
-moz-animation-delay: 114s;
-o-animation-delay: 114s;
-ms-animation-delay: 114s;
animation-delay: 114s;
}
#crossfade > img:nth-child(21) {
-webkit-animation-delay: 120s;
-moz-animation-delay: 120s;
-o-animation-delay: 120s;
-ms-animation-delay: 120s;
animation-delay: 120s;
}
#crossfade > img:nth-child(22) {
-webkit-animation-delay: 126s;
-moz-animation-delay: 126s;
-o-animation-delay: 126s;
-ms-animation-delay: 126s;
animation-delay: 126s;
}
#crossfade > img:nth-child(23) {
-webkit-animation-delay: 132s;
-moz-animation-delay: 132s;
-o-animation-delay: 132s;
-ms-animation-delay: 132s;
animation-delay: 132s;
}
#crossfade > img:nth-child(24) {
-webkit-animation-delay: 138s;
-moz-animation-delay: 138s;
-o-animation-delay: 138s;
-ms-animation-delay: 138s;
animation-delay: 138s;
}
#crossfade > img:nth-child(25) {
-webkit-animation-delay: 144s;
-moz-animation-delay: 144s;
-o-animation-delay: 144s;
-ms-animation-delay: 144s;
animation-delay: 144s;
}
#crossfade > img:nth-child(26) {
-webkit-animation-delay: 150s;
-moz-animation-delay: 150s;
-o-animation-delay: 150s;
-ms-animation-delay: 150s;
animation-delay: 150s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>
</head>
<body style="background-color:yellow">
<h1 style="color:black; text-align:center; font-family:Comic Sans MS">Interactive Alphabet Learning</h1>
<hr style="border-color:#E30B5D">
<div id="crossfade">
<img style="width: 300px; height: 300px; background: url(download.jpg) 0 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -300px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -600px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -900px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -1200px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -1500px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -1800px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -2100px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -2400px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -2700px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -3000px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -3300px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -3600px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -3900px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -4200px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -4500px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -4800px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -5100px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -5400px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -5700px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -6000px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -6300px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -6600px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -6900px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -7200px 0;" alt="Image 1">
<img style="width: 300px; height: 300px; background: url(download.jpg) -7500px 0;" alt="Image 1">
</div>
</body>
</html>
答案 0 :(得分：1)
据我所知，您希望当前图像在下一张图像开始淡入之前完全淡出。
CSS的问题在于关键帧的完成使得渐变发生在动画长度的0％到25％之间，如顶部指定的156s。这意味着动画发生超过39秒（156秒的25％），而不是6秒。
如果您骑自行车超过26张图片，请尝试使用以下百分比：
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
1.282% { opacity: 1;
animation-timing-function: ease-out; }
2.564% { opacity: 1 }
3.846% { opacity: 0 }
100% { opacity: 0 }
}
这些值基于计算6/156 = 3.846％。