CSS Animation Not Working when Added via JavaScript - css

Question

I have a web page that is using Bootstrap 5. This web page has one element stacked on top of another. After a period of time, I'm trying to fade-out the top element. In an attempt to do this, I have:
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 class are from Bootstrap 5.
This layout works like I want (i.e. the "Loading" is on top of the content). However, the "curtain" doesn't fade out. In an attempt to make it fade out, I have the following:
<script type="text/javascript">
setTimeout(() => {
alert('here');
var curtain = document.getElementById('curtain');
curtain.classList.add('fade-out');
}, 5000);
</script>
The timeout behaves as expected. I've confirmed in Chrome that the fade-out class is getting added to my element. However, the animation is not occurring. What is wrong with my CSS animation?

Answer 1

Nothing is wrong with your code you can add animation-fill-mode: forwards;
so your animation doesn't reset
setTimeout(() => {
var curtain = document.getElementById('curtain');
curtain.classList.add('fade-out');
}, 3000);
#-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;
animation-fill-mode: forwards;
}
<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>

Answer 2

If want animation to remain in its last state use forwards in short hand property
setTimeout(() => {
alert('here');
var curtain = document.getElementById('curtain');
curtain.classList.add('fade-out');
}, 5000);
.fade-out-class {
animation: fade-out 3s;
}
#-webkit-keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out {
-webkit-animation: fade-out 5s forwards;
animation: fade-out 5s forwards;
}
#curtain {
position: fixed;
top: 0;
left: 0;
height: 5vw;
width: 100vh;
}
<div id="host" class="position-relative">
<div id="content" class="position-absolute top-0 left-0 w-100">You can't see me before as I was under curtain</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>