在最后一帧停止CSS淡入淡出动画幻灯片放映



我正在为背景图像制作CSS动画渐变效果。动画正常进行,但会返回到第一帧。有没有办法在最后一帧之后停止它?

**
#slideshow {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width:100%;
height:100%;
display: inline-block;
}
.elemnt,.elemnt1,.elemnt2,.elemnt3 {
position: absolute;
left: 0;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: inline-block;
text-align: center;
}
.elemnt {
animation: xfade 50s 4s ; 
background-image: url('flip_data/2w.png');
}
.elemnt1 {
animation: xfade 50s 3s;  
background-image: url('flip_data/2f2.png');
}
.elemnt2 {
animation: xfade 50s 2s;
background-image: url('flip_data/2f1.png');
}
.elemnt3 {
animation: xfade 50s 0s;
animation-fill-mode: forwards;
background-image: url('flip_data/page_finale_web_flip.png');**

这就是您所需要的:

animation-fill-mode: forwards;

最新更新