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>