Currently, I am in the process of creating a CSS animation fade effect for a background image. The animation is working as expected but it keeps looping back to the initial frame. Is there a way to prevent this from happening once it reaches the last frame?
#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');