How to hide image after animation using css? - html

Question

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?

Answer 1

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

Answer 2

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!

Answer 3

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>