I'm struggling to create a CSS class and animation that will fade out or move a div along with its contents, resulting in the div having both display:none and visibility:hidden
My attempts so far have been unsuccessful! I can either get the animation to work or make it appear as if the div has been "removed"
This simple example showcases the problem
.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 attempted to update the CSS like this:
to {
opacity: 0;
margin-left: -100%;
visibility: hidden;
display: none;
}
I even tried using https://jsfiddle.net/
As you can see, I have commented out the hiding part in the CSS (even though the opacity hides it).
Do you think it's possible to apply the fadeout effect and then change the visibility and display without resorting to JavaScript?