Transition into animated borders using <hr> lines

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();
...
});

Answer №1

Although not flawless, this is the solution I came up with that gets the job done...

CSS Code:

.fade-in-line {
     animation: fadeIn 9s ease-in-out;
}


@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

HTML code: I introduced new DIV elements to encapsulate the <hr>.

<div class="carousel-caption d-flex flex-column justify-content-center h-100" style="top: 0; z-index: 2;">
      <div class="fade-in-line">
          <hr class="border border-white border-1 opacity-75 mx-lg-12 mx-sm-4 mb-1 fade-in-border">
      </div>
      <p class="display-2 text-white mb-1 mt-2 fade-in-Header"><span style="color: red;">W</span>IZNU FOR <span style="color:red">H</span>AIR</p>
      <div class="fade-in-line">
           <hr class="border border-white border-1 opacity-75 mx-lg-12 mx-sm-4 fade-in-border">
      </div>
      <p class="pt-3 lead text-white text-uppercase fade-in-Sub">The Hair Specialists</p>
  </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

If a popup is present on the webpage, be sure to close it

I'm facing the challenge of scraping data from a website. Sometimes, the web page displays a security dialog box before redirecting to the login page. To handle this scenario, I attempted to close the popup dialog using this code: Dr.FindElementByCss ...

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

Sending data from an HTML form to a div section without the need to refresh the entire page

I am currently working on a slide-down panel created in JQuery within a table. This panel includes a contact form where users can submit their information. My challenge is to post the form data to PHP without reloading the entire page, as the slide-down ...

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

The printing function for the window system can cause disruptions to the layout of the table

After creating a page with a simple table that can be filled in and printed, I noticed some issues with the table formatting after printing. The intended table design was supposed to look like this: https://i.stack.imgur.com/aAk89.png However, upon print ...

php Use cURL and the DOM to extract content with specified CSS styling

Unclear in the title, I want to copy all content from a specific div on an existing webpage (not owned by me). The code successfully extracts the content. Extractor code: // Get Data $curl_handle=curl_init(); curl_setopt($c ...

Implementing standard Header and Footer elements in Vue.js single-page applications

I'm currently working on a VueJS project for a spa. I've already created common components for the Header and Footer, and now I want to include them in the main App.vue file. Here is the structure of my code: https://i.sstatic.net/qdLam.png Le ...

GWT Designer style issue plaguing development efforts

Currently, I am working on designing a login view using GWT Designer while incorporating styles from Twitter Bootstrap. The structure I have set up is as follows: However, the displayed result does not meet my expectations: Despite setting all CSS paddi ...

Leveraging the powerful combination of the Bootstrap grid system alongside Angular Material's mat

Struggling to implement bootstrap 5 grid with angular material component mat-list? Desire for the text of the second field to occupy 12 columns on a small device. Successfully tested using div elements, obtaining the desired outcome. However, encounterin ...

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

CakePHP: Explaining the contrast between " $this->fetch('css') and $this->Html->css('cake.generic')" when working with CakePHP

Could anyone provide a brief explanation of these two lines found in the CakePHP layout.ctp file? It appears that both lines are used for adding CSS. What is the distinction between them? How do they function? $this->Html->css('cake.generic&ap ...

Developing an HTML table with the power of JavaScript and JSON

I am having difficulty creating an HTML table using JavaScript with JSON input. In my code, I'm using a placeholder in the HTML that will be filled by a innerHTML call in Javascript: for (var i = 0; i < json.data.length; i++) { listItem = json. ...

Accessing firebase using a connection to HTML5 through codeanywhere's devbox

Recently, I added Firebase to my CodeAnywhere HTML5 connection. However, when I tried to execute the shell command firebase login, I was directed to a URL to log in. Despite successfully logging in and granting the necessary permissions, I encountered an e ...

Transfer the html div element to the ajax request

My server-side code runs multiple bigquery queries and organizes the results in a table. The client calls this code via an ajax request. I want to send the table/div generated by the server-side code to the client so that it can be rendered there. Is this ...

Steps to correct color gradient on a fixed top navigation bar:

In my Bootstrap 4 project, I have a fixed navbar with a linear gradient background image. The navbar is transparent and fixed, but as I scroll down the page, the gradient disappears. Can anyone help me figure out how to keep the background image visible wh ...

What steps should be taken to acquire the most recent CSS files for a theme?

We are facing an issue with implementing a versioning system for our CSS files. Currently, we append a build number to the CSS link programmatically (e.g. \themes\ssss\abc.css?1011) so that clients always receive the latest CSS files with ea ...

PHP is having trouble identifying the file extension for file uploads

After sending an array through AJAX and echoing it in PHP, I have the following data: [file] => Array ( [name] => XXXX.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpC5F2.tmp [error] => 0 [size] = ...

Locate the element for a button or an image

Having trouble recognizing the object in the image. Looking for guidance on how to identify the Button using ClassName or customized XPATH. <div class="schedule"> <a href="https://link" target="_blank"> <img border="0" alt="Sc ...

Error: The term "Image" is unrecognizable

I'm in the process of creating a website where I want to display images via links. If the image is missing or only 1 pixel wide, I need the site to show an alternative image. My technology stack includes Jade/Pug and JS. Before rendering the links on ...

A transparent float is yielding unexpected outcomes

<!Doctype html> <html> <head> <meta charset="utf-8" /> <title>testing code</title> </head> <body> <div style="float: left; width: 200px; height: 150px; background-color: ...