CODEWITHSUNDEEP
javascripthtmlcss
Web-Student214
Web-Student214

Reputation: 127

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

Upvotes: 1

Views: 288

Answers (2)

Lahar Shah
Lahar Shah

Reputation: 7664

  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>

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18649

This preload class prevents transitions, but not keyframe animations. It's also a bit hacky.

Instead of removing a class on page load, it might make more sense to add the fadeInDown class in your $(window).load function, which will cause the CSS animation to run immediately after the class is added. Just remember to remove that class from the HTML, as it will now be added in JS.

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

Upvotes: 1

Related Questions