如何在页面加载后启动webkit动画?

时间:2016-11-29 22:43:29

标签: javascript html css

我有一个带有我的标题包装器的动画,我想在页面完全加载后启动动画。

然而,似乎它在页面加载之前启动。我在css技巧上查找了一个函数,这就是我在这里使用的。

似乎动画开始有点早。对此有何帮助?

从css技巧的帖子中我添加了一个类" preload"到了正文,然后在我的JavScript中删除了类来启动动画,但似乎没有用。

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

2 个答案:

答案 0 :(得分:1)

preload类可防止转换,但不会阻止关键帧动画。它也有点hacky。

在页面加载中删除类,而不是在fadeInDown函数中添加$(window).load类更有意义,这将导致CSS动画运行在课程加入后立即。请记住从HTML中删除该类,因为它现在将添加到JS中。

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

答案 1 :(得分:1)

  1. 从包装器div
  2. 中删除.fadeInDown
  3. 默认设置包装器div display:none
  4. display:block !important; CSS添加到.fadeInDown
  5. 在页面上准备好将.fadeInDown类添加到包装器div。
  6. $( 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>