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

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

标签： javascript html css

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

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

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

从css技巧的帖子中我添加了一个类＆＃34; preload＆＃34;到了正文，然后在我的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类
  2. 默认设置包装器div display:none。
  3. 将display:block !important; CSS添加到.fadeInDown类
  4. 在页面上准备好将.fadeInDown类添加到包装器div。

    5. $( 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>

相关问题
最新问题