How to hide image after animation using css?

user_19278601 0
Viewed 122

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?

fadeout css html
3 Answers
user_75372210

You can solve this with animation-fill-mode: forwards or you add it directly to your animation call:

animation: fadeIn 4s forwards;

Working example:

(I removed the unused @keyframes slideOut, the double CSS-code and the animation-duration, because you defined the duration already directly in the animation call)

.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: fadeIn 4s forwards;
  -webkit-animation: fadeIn 4s forwards;
  -moz-animation: fadeIn 4s forwards;
  -o-animation: fadeIn 4s forwards;
  -ms-animation: fadeIn 4s forwards;
  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; }
}
<div class="splash-wrapper">
  <img src="https://picsum.photos/200">
</div>

If you want to disappear the .splash-wrapper instead of just getting invisible, you can animate the height too:

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

(75% ist just an example - you could also take 99% o.s.)

Working example:

.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: fadeIn 4s forwards;
  -webkit-animation: fadeIn 4s forwards;
  -moz-animation: fadeIn 4s forwards;
  -o-animation: fadeIn 4s forwards;
  -ms-animation: fadeIn 4s forwards;
  animation-delay: 3.1s;
}

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

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

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

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

@-ms-keyframes fadeIn {
  0% { opacity: 1; height: 100vh; }
  75% { opacity: 0; height: 100vh; }
  100% { opacity: 0; height: 0; }
}
<div class="splash-wrapper">
  <img src="https://picsum.photos/200">
</div>

If manipulating the height is still not enough and you really want to hide the element after the animation, you have to use Javascript. You could use the animate() function, the setTimeout() function for the delay and a promise ( then() ) for setting the display property:

setTimeout(function() {
  splash_wrapper.animate(key_frames, timing_options).finished.then(function() {
    splash_wrapper.style.display = 'none';
  });
}, 3100);

Working example:

const splash_wrapper = document.querySelector(".splash-wrapper");

const key_frames = [
  { opacity: '1'},
  { opacity: '0'}
];

const timing_options = {
  duration: 4000,
  iterations: 1,
}

setTimeout(function() {
  splash_wrapper.animate(key_frames, timing_options).finished.then(function() {
    splash_wrapper.style.display = 'none';
  });
}, 3100);
.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;
}
<div class="splash-wrapper">
  <img src="https://picsum.photos/200">
</div>

user_153773550

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!

user_177676190
Related