Web-Student214 Web-Student214 - 7 days ago 8
CSS Question

how to start webkit animation after page load?

I have an animation with my header wrapper and I want the animation to start after the page completely loads.

However it seems like it starts before the page loads. I looked up a function on css tricks and that is what i am using here.

It seems the animation starts a little early. Any help with this?

From the post on css tricks i added a class "preload" to the body and then removed the class in my JavScript to start the animation but does not seem to work.

<!---------------------------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");
});

Answer
  1. Remove .fadeInDown class from wrapper div
  2. Make wrapper div display:none by default.
  3. Add display:block !important; CSS to .fadeInDown class
  4. On page ready add .fadeInDown class to 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>