I'm trying to make a css class and animation which will make a div (and it's contents) fade out or move, but ultimately, the div to have display:none
and visibility:hidden
My effort is not working! I can get it to either animate, or to appear to be "removed"
This crude example demonstrates the issue
.hide {
animation-name:fadeOut;
animation-duration:1s;
/*visibility: hidden;
display: none;*/
}
@keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
I also tried updating the CSS to
to {
opacity: 0;
margin-left: -100%;
visibility: hidden;
display: none;
}
And also on https://jsfiddle.net/
As you can see, in the CSS I have commented out the hiding part (although the opacity makes it hidden).
Is it possible to apply the fadeout and then update the visibility
and display
without using JavaScript?