动画文本的动画顺序错误

Question

我正在使用 animate.css 以便在页面加载时为文本添加动画效果。我正在延迟效果，但它显示的是文本，然后是动画，看到了吗？

您可以在此处查看正在运行的动画：https://gyazo.com/a51b4248203c72cbf81012e7f7fad112。

如果你需要靠近我的 HTML & CSS: https://hastebin.com/dawawecuvi.xml

@import url('https://fonts.googleapis.com/css?family=Pacifico');

.logotext{
    color: limegreen;
    font-size: 34px;
    font-family: 'Pacifico', cursive;
}

.navbar-default{
    background-color: dimgrey !important;
    box-shadow: 0px 5px 0px limegreen !important;
}


.navbar-default .navbar-nav > li > a {
color: white !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white !important;
}

li{
    font-size: 20px;
    
}

.navbar-right{
    padding-right: 80px;
}

.hvr-sweep-to-top:before {
    background: limegreen ;
}


.container-fluid { 
  padding: 0px;
}

.aboutmediv{
    background-color: black;
    height: 900px;
}

.imagetextbig { 
    position: absolute; 
    top: 240px; 
    width: 100%;
    color: goldenrod;
    font-size: 90px;
    text-align: center;
    animation: slideInLeft 1s;
    animation-delay: 0.9s;
}

.navbar-fixed-top{
    animation: slideInDown 1s;
    animation-delay: 0.1s;
}

.imgtext2{
    margin-top: 100px;
    animation: slideInRight 1s;
    animation-delay: 0.9s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Nydigov">
    <meta name="description" content="Nydigovs portfolio site. Check out my recent work!">
    <meta name="keywords" content="Fellex,Nydigov,NY,nydigov,fellex,fell,fellex.me,Fellex.me">
    <link rel="shortcut icon" href="img/athyslogo.png">
    <title>Nydigov</title>
    
    <!--All links secure-->
    
    <!--Latest compiled and minified CSS--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--Secure link to paper bootstrap theme -->   
    <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css" integrity="sha384-I3UMl9KZhtYWd8htMkmvi+cG4KsfRMyoiX7O3teTUiqrP+34X3fuqYI5GUOC0N82" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    <!--Animate.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
    
    <!--FontAwesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    
    <!--Hover CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" integrity="sha384-VTeRBIyCP1UOtJsYqkdWx9FnCcVTZlBzNKjt0R0FMPZUVvNmz2bflo5bg7kbZDU1" crossorigin="anonymous">
    
    <!--Main Stylesheet-->
    <link rel="stylesheet" href="css/main.css">
    
</head>
<body>
   <!--Navbar-->
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#"><p class="logotext">Nydigov</p></a>
            </div>
            <ul class="nav navbar-nav pull-right navbar-right">
              <li class="hvr-sweep-to-top"><a href="#">Home</a></li>
              <li class="hvr-sweep-to-top"><a href="#">Past Work</a></li>
              <li class="hvr-sweep-to-top"><a href="#">Contact</a></li>
            </ul>
          </div>
        </nav>
    
    <!--Content-->
    <div class="container-fluid">
       <!--Image-->
        <div class="image">
            <img src="images/imagebacktop.jpg" alt="" class="img-responsive mainimg">
            <h2 class="imagetextbig">Hi, I'm Nydigov</h2>
            <h2 class="imagetextbig imgtext2">And this is my site</h2>
        </div>
        <!--About Me-->
        <div class="aboutmediv"></div>
        
        
    </div>
    
    
</body>
</html>

Answer 1

看看你的 CSS，我想这些就是我们正在谈论的两个要素：

.imagetextbig { 
    position: absolute; 
    top: 240px; 
    width: 100%;
    color: goldenrod;
    font-size: 90px;
    text-align: center;
    animation: slideInLeft 1s;
    animation-delay: 0.9s;
}
.imgtext2{
    margin-top: 100px;
    animation: slideInRight 1s;
    animation-delay: 0.9s;
}

如果您希望它们首先隐藏，然后从页面的两侧滑入，您有两种选择。第一个选项是更改 CSS 以便它们在屏幕外开始并在屏幕上显示动画。但是没有一个即插即用的解决方案，您可以直接使用开箱即用的 animate.css 动画并让它工作。

所以我们可以做第二个选项，即在页面加载时隐藏它们，然后在动画开始时让它们出现。在元素的默认样式中使用 visibility: hidden 以在页面首次加载时隐藏它们。

.imagetextbig { 
    position: absolute; 
    top: 240px; 
    width: 100%;
    color: goldenrod;
    font-size: 90px;
    text-align: center;
    animation: slideInLeft 1s;
    animation-delay: 0.9s;
    visibility: hidden; /*add this*/
}
.imgtext2{
    margin-top: 100px;
    animation: slideInRight 1s;
    animation-delay: 0.9s;
    visibility: hidden; /*add this*/
}

然后，在动画中，我们要确保它们切换到 visibility: visible，否则您将对不可见元素进行动画处理。

如果我们去 animate.css website 查看他们的源代码，我们可以看到 slideInLeft 的动画看起来像这样：

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}

换句话说，在动画开始时将元素设置为可见已经为您处理好了。因此，只需在开始时将 visibility: hidden 添加到默认样式即可。 slideInRight 动画类似于 slideInLeft 动画：它也在开始时设置 visibility: visible。所以也没什么好担心的。

动画文本的动画顺序错误

Animated text animates in wrong order

css

html

animation

animate.css