以错误的顺序动画文本动画

-1

我使用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>

来源

2017-08-03 Nydigov

那么，文本是页面加载动画，你自己回答 – jvitoroc

设置文本隐藏的可见性，然后当页面加载使其可见 – jvitoroc

我会怎么做主约翰？ – Nydigov

在你的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; 
}

如果您希望它们先被隐藏然后从pag的侧面滑入e，你有两个选择。第一个选择是更改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。所以没有什么可担心的。

来源

2017-08-04 04:35:04 cjl750

以错误的顺序动画文本动画

回答

相关问题