JavaScript's addition of CSS animation not functioning as intended

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?

Answer №1

Your code is perfectly fine, but to prevent your animation from resetting, you can include animation-fill-mode: forwards;

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 you wish for the animation to stay in its final state, include forwards in the shorthand 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 won't see me yet since I was hidden behind the 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to align a thumb to the left and content to the right?

What is considered the optimal method for positioning an image to the left with two text fields to the right of it? Is using floats or positioning better? <li> <a href=""> <img src=""THUMB HERE /> </a> <a href=""> TITLE </ ...

SVG with embedded fonts failing to display properly in web browsers

Within this SVG, there are two different font types being used: SymbolMT for the mathematical expressions and Hind-Light for the text. Both fonts have been defined within the @font-face section of the SVG. The font used for the math expressions appears a ...

What is the best way to include a CSS stylesheet in a Wordpress theme?

Is there a way for me to properly load my custom CSS in Wordpress so that the dynamically inputted content on my pages matches the styling of my header and footer? In my functions.php file, I currently have the following code, but it only prints the code ...

How can we use Jquery to add animation effects to our styling

I am a beginner with JQuery and struggling to make the code below work correctly. $('.announcement_panel_button').click(function(e){ $('#site_logo').animate({ 'margin-top': '5px' }, 5000); e.pre ...

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

Incorporate functionality into a button using jQuery

I am working on a table that displays data in different levels (Parent, Child, Grandson). When I click on the parent row, it expands to show new rows related to the child level. Similarly, clicking on a child row reveals a third level known as the grandson ...

Ways to manipulate the content of a div

HTML <span class = "Box"> <div class = "active"> <a href ="#-night"> <span class ="list">4</span> <span class="locations"><?php echo $location; ?></span> <span ...

developing both vertical and horizontal 'cross out'

I'm attempting to add a 'spacer' between buttons on my website using the word "or" with a vertical line centered above and below it. I've tried HTML <div class="footer-btn-wrap"> <div class="decor"><a href="... < ...

Something seems to be preventing Div from appearing and there are no error messages appearing

I've been attempting to create a menu, but the toggle div for the menu isn't visible Following a tutorial where an individual sets up a menu, there is a div with a menu icon in the top left corner. Despite meticulously copying the code from the ...

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose the first div with id 1, then I s ...

modifying the appearance of the play button through a JavaScript event without directly altering it

I am currently working on building a music player from scratch using HTML, CSS, and JavaScript only. To store the list of songs, I have created an array named "songs" with details such as song name, file path, and cover image path. let songs = [ {songNa ...

What could be causing the CSS height percentage to malfunction?

I'm having trouble with some basic CSS that uses percentages. I've labeled everything and checked my code, but it still isn't working properly. Here's the CSS code snippet: .BoxHeight { height: 100%; } #Box { margin-top: 0%; mar ...

The component next/image is experiencing issues when used in conjunction with CSS

I struggled to create a border around an image because the custom CSS I wrote was being overridden by the Image component's CSS. Despite trying to leverage Tailwind and Bootstrap to solve the problem, my efforts were unsuccessful. Now, I am at a loss ...

Leveraging multiple ">" CSS selectors

Here is the HTML code to style: <table id="my-table"> <tr> <td> I would like to customize this </td> <td> <table> <tr> <td> Not looking to customize t ...

Enhancing the appearance of the active menu item with HTML/CSS/JS/PHP

Here's the HTML code I have: <ul class="navigation"> <li><a href="index.php">Home</a></li> <li><a href="index.php?content=about">About us</a></li> </ul> As you can see, the content of the " ...

Utilizing data attributes over classes for styling in CSS

Programming Languages <span data-bar> ... </span> JavaScript span[data-bar]{ ... } Do you agree with this coding practice? Are there any potential pitfalls? I believe implementing the data- attribute is beneficial when dealing with a large ...

Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup... https://i.stack.imgur.com/ZsTdI.png I have an input field, but I'm having trouble placing the image in that position. <div class="row"> <div class="col-sm-4 col-m ...

Are the navigation links at the bottom of the sidebar?

I've been experimenting with positioning three navigation links at the bottom of a sidebar I created, but I'm having trouble getting them there. Despite my attempts, I can't seem to figure out how to make it work. The background of the nav ...

Tips for displaying cards with responsive design utilizing Bootstrap 5

How can I display cards responsively for mobile, desktop, and iPad? My goal is to have: - One column for mobile - Two columns for iPad - Four columns for desktop The current code only works for mobile and desktop, not for iPad. On my iPad, it's sh ...

Issue with Safari: Unable to trigger CSS :hover when tapping SVG element

On an iOS device in Safari, tapping this SVG element does not trigger the transition animation to fade in the replacement <g id="training-sub-menu">. The animation is confirmed to work, as there is a strange behavior where long-pressing whe ...