How do I use the animation-iteration-count parameter to stop this animation from repeating?-CodePudding

Right now I'm using a really long fade out time to give the impression that the element is gone, but know there is a better (and simpler) way to do this.

I want the animation to complete, then leave the text completely faded out.

I attempted to use the animation-iteration-count property, but don't think I put it in the right place.

.gZFNLC {
  animation: fadeOut 100s;
  -webkit-animation: fadeOut 100s;
  -moz-animation: fadeOut 100s;
  -o-animation: fadeOut 100s;
  -ms-animation: fadeOut 100s;
}
@keyframes fadeOut {
  0% {opacity:1;}
  3% {opacity:1;}
  4% {opacity:0;}
  100% {opacity:0;}
}

@-moz-keyframes fadeOut {
  0% {opacity:1;}
  3% {opacity:1;}
  4% {opacity:0;}
  100% {opacity:0;}
}

@-webkit-keyframes fadeOut {
  0% {opacity:1;}
  3% {opacity:1;}
  4% {opacity:0;}
  100% {opacity:0;}
}

@-o-keyframes fadeOut {
  0% {opacity:1;}
  3% {opacity:1;}
  4% {opacity:0;}
  100% {opacity:0;}
}

@-ms-keyframes fadeOut {
  0% {opacity:1;}
  3% {opacity:1;}
  4% {opacity:0;}
  100% {opacity:0;}
}

<div >Image</div>

CodePudding user response：

You can use animation-fill-mode to stop at your end-state. Read more

.gZFNLC {
  animation: fadeOut 3s forwards;
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0;}
}

<div >Image</div>

If you want to display it for a specific time before fading away, you can use animation-delay.