While working on a basic static website using Bootstrap 5, I encountered an issue with the animations in the full-screen carousel. The Navbar, Title text, and subtext fade in smoothly as intended. However, I faced challenges trying to apply similar animations to the two border lines which should ideally appear last.
Below is the HTML code for the Carousel:
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" style="color: transparent !important; z-index: 3;">
...
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
...
<div class="carousel-caption d-flex flex-column justify-content-center h-100" style="top: 0; z-index: 2;">
<hr class="border border-white border-1 opacity-75 mx-lg-12 mx-sm-4 mb-1 fade-in-border">
...
</div>
</div>
</div>
The following CSS animations were attempted without success:
I initially applied opacity-based animations like other elements, then experimented with background-color ones, and also tried border-based animations, but none showed the desired effect.
<style>
.fade-in-Header {
animation: fadeIn 4s;
}
...
</style>
Edit/Update: I added JS code to ensure the carousel fills the screen height on all devices.
var $item = $('.carousel-item');
var $wHeight = $(window).height();
...
});