How to hide image after animation using css?

I tried the following code To Fade Out The Image ,

.splash-wrapper {
  animation: fadeIn 4s;
  -webkit-animation: fadeIn 4s;
  -moz-animation: fadeIn 4s;
  -o-animation: fadeIn 4s;
  -ms-animation: fadeIn 4s;
  animation-duration: 3s;
  animation-delay: 3.1s;
}

@keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #86FF0000;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap
  justify-content: center;
  align-items: center;
  animation-duration: 3s;
  animation-delay: 3.1s;
}

@keyframes slideOut {
  from{margin-left: 0vw;}
  to{margin-left: -150vw;}
}

<div class="splash-wrapper">
  <img src="https://picsum.photos/200">
</div>

It fades out the image but it's reappearing again and even never fades or becomes invicible. How can i hide the image completely after the animation? . Should i also mention it's visibility?

Solution

Try this!

.splash-wrapper {
  animation: fadeIn 4s;
  -webkit-animation: fadeIn 4s;
  -moz-animation: fadeIn 4s;
  -o-animation: fadeIn 4s;
  -ms-animation: fadeIn 4s;
  
  position: fixed;
  z-index: 9999;
  background-color: #86FF0000;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap
  justify-content: center;
  align-items: center;
  animation-duration: 3s;
  animation-delay: 3.1s;
  
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slideOut {
  from{margin-left: 0vw;}
  to{margin-left: -150vw;}
}

<div class="splash-wrapper">
  <img src="https://picsum.photos/200">
</div>

Thanks and best regards!