Animierte Text animiert in falscher Reihenfolge

-1

Ich benutze animate.css, um Text beim Laden der Seite zu animieren. Ich verzögere die Effekte, aber es zeigt den Text und animiert es dann?Animierte Text animiert in falscher Reihenfolge

Sie können die Animation in Aktion hier sehen: https://gyazo.com/a51b4248203c72cbf81012e7f7fad112.

Wenn Sie näher an meinem HTML benötigen & 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>

Quelle

2017-08-03 Nydigov

Nun, der Text animiert beim Laden der Seite, Sie beantworten sich selbst – jvitoroc

Setzen Sie den Text auf Sichtbarkeit ausgeblendet, dann, wenn die Seite geladen macht es sichtbar – jvitoroc

Wie würde ich das Master John tun? – Nydigov

in Ihrem CSS Sehen, gehe ich davon aus das sind die beiden Elemente, die wir reden:

.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; 
}

Wenn Sie wollen, dass sie zuerst versteckt und dann von den Seiten der Seite einschieben e, Sie haben zwei Möglichkeiten. Die erste Option besteht darin, das CSS so zu ändern, dass es außerhalb des Bildschirms startet und auf dem Bildschirm animiert wird. Aber dafür gibt es keine Plug-and-Play-Lösung, bei der Sie einfach die animate.css-Animation sofort verwenden können.

So können wir die zweite Option tun, nämlich sie auszublenden, wie die Seite geladen wird, und sie dann erscheinen lassen, wenn die Animation startet. Verwenden Sie visibility: hidden in Ihren Standardstilen für die Elemente, um sie beim ersten Laden der Seite auszublenden.

.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*/ 
}

Dann wird in der Animation, wir wollen, dass sie zu visibility: visible wechseln machen, sonst werden Sie ein unsichtbares Element Animieren werden.

Wenn wir die animate.css website und überprüfen ihren Quellcode zu gehen, können wir sehen, dass die Animation für slideInLeft wie folgt aussieht:

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

    to { 
     transform: translateZ(0); 
    } 
}

Mit anderen Worten, zu Beginn der Animation, die Elemente sichtbar Einstellung ist schon für dich gesorgt. Fügen Sie einfach nur visibility: hidden zu den Standardstilen am Anfang hinzu. Die slideInRight-Animation ähnelt der slideInLeft-Animation: Sie setzt auch visibility: visible an ihrem Anfang. Also nichts, worüber man sich auch Sorgen machen müsste.

Quelle

2017-08-04 04:35:04 cjl750

Animierte Text animiert in falscher Reihenfolge

Antwort

Verwandte Themen