-2

I'm working on a CSS animation fade effect for a background image. The animation proceed normally but is coming back to the first frame. Is there a way to stop it after 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');**
zaargh
  • 1

1 Answers1

0

This is what you need:

animation-fill-mode: forwards;

Nimitt Shah
  • 4,477
  • 2
  • 10
  • 21
  • I tried many ways of integrating this code but it doesn't work for me. If you look in my .elemnt3 code, animation-fill-mode: forwards; is already there. Also tried animation: xfade 50s 0s forwards !important; but it doesn't work either. – zaargh Dec 01 '18 at 00:29
  • Add your html code or jsfiddle to make it more clear. – Nimitt Shah Dec 01 '18 at 04:30
  • Here's the html: `html, body { width:100%; height:100%; } body { margin: 0; } .container { width:100%; height:100%; }` – zaargh Dec 01 '18 at 10:49