I am facing an issue with a web page utilizing Bootstrap 5. The webpage consists of one element stacked on top of another. My goal is to fade-out the top element after a certain period. Here is what I have tried:
HTML
<div id="host" class="position-relative">
<div id="content" class="position-absolute top-0 left-0 w-100"></div>
<div id="curtain" class="position-relative top-0 left-0 h-100 opacity-100" style="background-color: orange; z-index:1000;">
Loading...
</div>
</div>
CSS
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
.fade-out {
-webkit-animation-name: fade-out;
-webkit-animation-duration: 1s;
animation-name: fade-out;
animation-duration: 1s;
}
The other css classes mentioned are part of Bootstrap 5.
This layout functions as intended with the "Loading" element displayed on top of the content. However, the "curtain" element does not fade out. To achieve the fade-out effect, I added the following:
<script type="text/javascript">
setTimeout(() => {
alert('here');
var curtain = document.getElementById('curtain');
curtain.classList.add('fade-out');
}, 5000);
</script>
The timeout works correctly, and in Chrome, it has been verified that the 'fade-out' class is being applied to the element. Despite this, the animation does not take place. What could be causing the issue with my CSS animation?