How to hide image after animation using css?-CodePudding

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 >
  <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?

CodePudding user response：

Check animation-fill-mode property

.splash-wrapper {
  animation-fill-mode: forwards;
}

CodePudding user response：

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 >
  <img src="https://picsum.photos/200">
</div>

Thanks and best regards!

CodePudding user response：

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 >
  <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 >
  <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 >
  <img src="https://picsum.photos/200">
</div>