我在 CSS 动画上遇到动画延迟问题。我有 3 张图片，我想将其制作为幻灯片。插图是，图像1到图像2需要15秒改变，图像2到图像3需要15秒改变，图像3回到图像1需要30秒，在第一个循环之后，我想让幻灯片结束于图像3，因此图像1到图像2仍然需要15秒，图像2到图像3仍然需要15秒，当图像3加载时，不需要返回到图像1。我尝试了这个代码，但它给了我所有图像15秒的延迟。这是我的代码：
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
position: absolute;
opacity:0;
}
li {
animation: xfade 45s infinite;
}
li:nth-child(2) {
animation-delay:15s;
}
li:nth-child(3) {
animation-delay:30s;
}
@keyframes xfade{
3%{opacity:1}
33% {opacity:1;}
36%{opacity:0}
}
<ul>
<li><img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li>
<li><img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li>
<li><img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li>
</ul>
我想根据上面的插图延迟我的动画。任何人都可以帮我解决这个问题吗？先谢谢你了。
我认为如果你想要像这样的特定场景的动画，使用 GreenSock 会更好。
这是我能用 HTML 和 CSS 得到的最接近的结果，我还需要复制<li>以适合您的场景。
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
position: absolute;
opacity: 0;
}
li:nth-child(6) {
/*The last item always on the top, direction will goes from last to first*/
animation: xfade 15s;
}
li:nth-child(5) {
/*Put animation length double the delay (in this case delay is the actual animation length)*/
animation: xfade 30s 15s;
}
li:nth-child(4) {
animation: xfade 30s 15s;
}
li:nth-child(3) {
animation: xfade 30s 15s;
}
li:nth-child(2) {
animation: xfade 30s 15s;
}
li:nth-child(1) {
opacity: 1;
}
@keyframes xfade{
0%{opacity:0}
33% {opacity:1;}
100%{opacity:0}
}
<ul>
<li>1<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li>
<li>2<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li>
<li>3<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li>
<!-- Duplicate -->
<li>4<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li>
<li>5<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li>
<li>6<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
