"Is there a way to initiate a WebKit animation once the webpage has finished loading

My header wrapper has an animation that I want to start only after the page has completely loaded.

Unfortunately, it seems like the animation starts before the page finishes loading. I found a function on CSS Tricks that I am currently using here.

The issue is that the animation begins a bit too early. Can anyone assist with this?

According to the post on CSS Tricks, I added a class "preload" to the body and then removed the class in my JavaScript to trigger the animation, but it doesn't seem to be working.

<!---------------------------HTML ------------------------>

<!DOCTYPE html>
<html lang = "en-us">

    <head>

      <title>Carlos Elizondo</title>    
      <link rel = "stylesheet" type = "text/css" href = "main.css">

      <link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

      <link rel = "stylesheet" type = "text/css" href = "animate.css">

      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">



    </head>

    <body class = "preload">

<!------------------------------------------------------------HEADER------------------------------------------------------------------>        
      <header>
          <div class="header-bg"></div>

          <div class="header-dark">

            <div class="wrapper anim fadeInDown">

                <div class = "heading">Hi. My Name is</div>

                <div class = "box-name">Carlos Elizondo</div>

                <div class = "heading">I'm a future web developer and current student </div>

              <ul>

                <li>
                    <a href="#" class="ion-social-facebook"></a>
                </li>

                <li>
                  <a href="#" class="ion-social-twitter"></a>
                </li>

                <li>
                  <a href="#" class="ion-social-linkedin"></a>
                </li>

              </ul>

            </div>

          </div>

          <nav class = "clearfix">

              <a href = "#contact-title" class = "nav-links last">Contact</a>

              <a href = "#portfolio" class = "nav-links">Portfolio</a>

              <a href = "#skills" class = "nav-links">Skills</a>

              <a href = "#about-me" class = "nav-links ">About Me</a>

          </nav>

        </header>
    </body>
</html>


<!--------------------------------------CSS------------------------------>

*{
    margin: 0;
    padding: 0;
}


body{
    margin: 0;
    font-family: 'Raleway', sans-serif;
    padding: 0;
}

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/

header{
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    bottom: 0;
    margin: 0;


}

.header-bg{

    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(macbook2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.header-dark{

    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

}

.wrapper{

    width: 850px;
    height: auto;
    margin-top: -50px;


}


h2{
    color: white;
    text-align: center;
    letter-spacing: 0.1em;

}

h4{
    color: white;
    text-align: center;
    letter-spacing: 0.1em;
}

ul{   

    list-style-type: none;
    text-align: center;
    padding: 0;
    margin-top: 20px;

}

ul li{

    display: inline-block;
    padding: 0 13px;


}


.ion-social-facebook{
   color: white;
   font-size: 28px;

}

.ion-social-facebook:visited{
    color: white;
}

.ion-social-facebook:visited{
    color: white;
}

.ion-social-twitter{

    color: white;
    font-size: 28px;
}

.ion-social-linkedin{
    color: white;
    font-size: 28px;
}


nav{
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 100;
    background: rgba(0,0,0,0.4);

}

.nav-links{
    float: right;
    color: #fff;
    margin: 20px 10px;
    text-decoration: none;
}

.nav-links.last{
    margin-right: 30px;
}

nav > a{
    position: relative;
    text-decoration: none;

}

nav > a:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #ffffff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;   

}

nav a:hover:before{
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.logo:link{

    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;

}

.heading{
    color: white;
    text-align: center;
    font-size: 30px;

}

.box-name{
    color: white;
    text-align: center;
    border: 6px solid white;
    padding: 9px;
    font-size: 75px;
    margin-bottom: 10px;
    letter-spacing: 2px;
    margin-top: 10px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

.anim{
    -webkit-animation-duration: 1s;
    -animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}

@-webkit-keyframes fadeInDown{
    0%{
        opacity: 0;
        -webkit-transform: translateY(-60px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@keyframes fadeInDown{
    0%{
        opacity: 0;
        -webkit-transform: translateY(-60px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

.fadeInDown{
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

<!-----------------------------------------JS------------------------------>

$(window).load(function() {
  $("body").removeClass("preload");
});
javascripthtmlcss

Answer №1

  1. Take out the .fadeInDown class from wrapper div
  2. Set the default display of the wrapper div to none.
  3. Add display:block !important; CSS to the .fadeInDown class
  4. When the page is ready, apply the .fadeInDown class to the wrapper div.

$( document ).ready(function() {
    $(".wrapper").addClass("fadeInDown");
});
*{
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    font-family: 'Raleway', sans-serif;
    padding: 0;
}

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

header{
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    bottom: 0;
    margin: 0;
}

.header-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(macbook2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.header-dark{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.wrapper{
    width: 850px;
    height: auto;
    margin-top: -50px;
}

h2{
    color: white;
    text-align: center;
    letter-spacing: 0.1em;
}

h4{
    color: white;
    text-align: center;
    letter-spacing: 0.1em;
}

ul{   
    list-style-type: none;
    text-align: center;
    padding: 0;
    margin-top: 20px;
}

ul li{
    display: inline-block;
    padding: 0 13px;
}

.ion-social-facebook{
   color: white;
   font-size: 28px;
}

.ion-social-facebook:visited{
    color: white;
}

.ion-social-facebook:visited{
    color: white;
}

.ion-social-twitter{
    color: white;
    font-size: 28px;
}

.ion-social-linkedin{
    color: white;
    font-size: 28px;
}

nav{
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 100;
    background: rgba(0,0,0,0.4);
}

.nav-links{
    float: right;
    color: #fff;
    margin: 20px 10px;
    text-decoration: none;
}

.nav-links.last{
    margin-right: 30px;
}

nav > a{
    position: relative;
    text-decoration: none;
}

nav > a:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #ffffff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;   
}

nav a:hover:before{
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.logo:link{
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
}

.heading{
    color: white;
    text-align: center;
    font-size: 30px;
}

.box-name{
    color: white;
    text-align: center;
    border: 6px solid white;
    padding: 9px;
    font-size: 75px;
    margin-bottom: 10px;
    letter-spacing: 2px;
    margin-top: 10px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

.anim{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown{
    0%{
        opacity: 0;
        -webkit-transform: translateY(-60px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@keyframes fadeInDown{
    0%{
        opacity: 0;
        -webkit-transform: translateY(-60px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

.fadeInDown{
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    display:block !important;
}
<!DOCTYPE html>
<html lang = "en-us">

    <head>

      <title>Carlos Elizondo</title>    
      <link rel = "stylesheet" type = "text/css" href = "main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

      <link rel = "stylesheet" type = "text/css" href = "animate.css">

      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">

    </head>

    <body class="preload">

<!------------------------------------------------------------HEADER------------------------------------------------------------------>        
      <header>
          <div class="header-bg"></div>

          <div class="header-dark">

            <div class="wrapper anim" style='display:none'>

                <div class = "heading">Hi. My Name is</div>

                <div class = "box-name">Carlos Elizondo</div>

                <div class = "heading">I'm a future web developer and current student </div>

              <ul>

                <li>
                    <a href="#" class="ion-social-facebook"></a>
                </li>

                <li>
                  <a href="#" class="ion-social-twitter"></a>
                </li>

                <li>
                  <a href="#" class="ion-social-linkedin"></a>
                </li>

              </ul>

            </div>

          </div>

          <nav class = "clearfix">

              <a href = "#contact-title" class = "nav-links last">Contact</a>

              <a href = "#portfolio" class = "nav-links">Portfolio</a>

              <a href = "#skills" class = "nav-links">Skills</a>

              <a href = "#about-me" class = "nav-links ">About Me</a>

          </nav>

        </header>
    </body>
</html>

Answer №2

This particular preload class is designed to halt transitions while still allowing keyframe animations to occur. It's a somewhat unconventional solution, but it gets the job done.

Instead of simply taking away a class upon page load, consider incorporating the fadeInDown class into your $(window).load function. This way, the CSS animation will trigger immediately after the class is applied. Just be sure to delete the class from the HTML since it will now be inserted through JavaScript.

$(window).load(function() {
  $(".wrapper").addClass("fadeInDown");
});

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

How can you minimize the size of your HTML files?

My code generates an HTML file, but when there is a large amount of text, the file can exceed 50mb, sometimes reaching 70-80mb. I prefer to avoid having an HTML file of this size. Below is the source code defining an HTML template: namespace Structure { ...

htmlc++css

Tips for preventing hcaptcha from displaying image challenges during web scraping with puppeteer

When I attempt to scrape a website, the process of passing the captcha can be unpredictable. Sometimes, after clicking on the captcha checkmark, I am presented with images to solve the captcha. Other times, it simply passes me through without any further a ...

javascriptnode.jspuppeteer

Disable the border and background colors in CloudFlare Turnstile

I have implemented the CloudFlare reCaptcha Turnstile and I am looking to modify the widget by removing the border and background color. I believe this customization can be achieved using CSS or Javascript. Thank you for any assistance! ...

javascriptcssrecaptchacloudflare

Tap on the image to enlarge

I have a question regarding using thumbnails from Bootstrap. I am trying to create functionality where when I click on a thumbnail, the picture with its original sizes appears and then disappears when clicked anywhere else on the page. Below is an exampl ...

javascriptphpcss

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

When using these two files, only one of them can work on a page. <script src="jquery.min.js"></script> <script src="jquery-1.min.js"></script>//Only the second one works Alternatively, if the order is changed: <script src="jq ...

javascriptjqueryhtml

Strange floating elements wrapping inside Bootstrap 3 column divs

Essentially, I have a series of twitter-bootstrap square divs with classes like col-md-x, col-sm-x stacked together to form an image list. It's functioning smoothly for the most part. However, there are instances (which remain a mystery to me) where t ...

htmlcsstwitter-bootstrap

Configuring a Custom Color for the Bootstrap Datetimepicker

Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...

htmlcssdatetimepicker

No value being returned by promise

Encountering a node issue with the use of the imap module, where the goal is to implement a promise. I have set up a Promise.method() using bluebird. The code can be found at: https://github.com/dkran/email-thinky-test/ The problem arises in a file that c ...

javascriptnode.jsasynchronouspromisebluebird

Extracting the contents of a Span tag that lacks a class attribute and is not present in every element

I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

"Utilize browser detection to direct users to appropriate pages - whether by using htaccess or another method

I'm in the process of creating a website and I've noticed that it looks quite bad on Firefox and IE. I was wondering if you could help me figure out how to redirect users to different pages based on the browser they are using. Since I am not an ...

javascriptphp.htaccesshttp-redirect

Unable to transmit information to a different page

My goal is to transmit both hidden data and user input data to another page. Initially, I attempted to have just one user input field, which allowed the system to transmit the data successfully. <h1><strong>Please scan barcode on JIG</stron ...

phphtmlmysql

The process of extracting all arrays from a JSON object

Within my JSON object, there is a list of countries each with multiple regions stored in an array. My goal is to extract and combine all the regions into one single list. However, when I attempt to map the data, it does not consolidate all the regions as e ...

javascriptarraysjsonangulartypescript

Exploring methods to retrieve the schema of a Mongoose database declared in a separate model

Here is the folder structure that I am working with: +-- express_example |---- app.js |---- models |-------- songs.js |-------- albums.js |---- along with other files related to ExpressJS In my songs.js file, I have the following code: var mongoose = re ...

javascriptnode.jsmongodbmongoosenosql

Absence of waves in Bootstrap Material Design

I am currently working on integrating the bootstrap-material-design theme into my existing Bootstrap website. In the main.blade.php file, I have added the following code snippet to include the necessary stylesheets. <!-- CSS --> <link href="/css ...

javascriptcsstwitter-bootstrapmaterial-designbootstrap-material-design

Having difficulty configuring particlesJS as the background

If you're looking to create a three-page single scrolling webpage with particlesJS as the background, consider using the following resources: particlesJS Website and particlesJS Github Page. An issue arises when trying to set particlesJS as the back ...

javascriptcsshtmltwitter-bootstrap-3particles.js

Utilize Ajax to transfer an image from an input form to a PHP script

I am currently working on a basic HTML page that includes an image upload form. Here is the code for the form: <input type='file' id='image_uploaded' accept='image'/> <input type='submit' id="upload_image"/ ...

javascriptphpjqueryajax

How to retrieve text content from a span element with Selenium WebDriver and C#

I am at a mental roadblock and can't figure out this puzzle. My goal is to retrieve the number "9" from the span with id = "lookupCount". No matter how much effort I put in, I just can't seem to make it work. Please lend me a hand, here is the pr ...

c#htmlseleniumwebdriver

Differences in CSS behavior between Chrome and Firefox

I am facing an issue with the heights of divs inside table cells. While they expand correctly to 100% height in Chrome, the same is not happening in Firefox. Here is a comparison image showing the difference: https://i.sstatic.net/knkeT.png The CSS styli ...

htmlcss

Displaying the total count of slides available on the webpage

Check out the custom slider I created on this codepen page: http://codepen.io/anon/pen/NqQpjG I have added an additional feature that tracks the total number of slides that have been moved. For instance, if there are a total of 8 slides, the initial va ...

javascriptjqueryhtml