Animate.css Verzögerung Animationen, Wie erstellt man Folien mit animate.css

Question

Ich habe ein kleines Problem .. bin sicher, dass es gelöst wurde, aber in der Lage gewesen, jede Stackoverflow-Lösung zu sehen .. so thot zu fragen

ich eine Folie über einen Video erschaffe, i der Schieber der Schieber keine Bilder scrollen in möchten, hat nur Bildunterschriften

ich bin mit dem animate.css und jquery, das Problem, das ich habe, ist ich scheine kippe Um meine Folie so zu verzögern, dass die Zuschauer sie lesen können, bevor sie für die nächste Folie weggeht, ist ein weiteres Problem, dass ich die nächste Folie nicht bekommen kann.

Unten sind die Codes

<!--==========Video area==========--> 
    <section> 
<div class="content"> 
    <video autoplay="autoplay" muted="muted" loop="loop"> 
     <source src="view.mp4" type="video/mp4"> 
    </video> 
<div class="content-slide"> 
    <h1>HESI-GEOMATICS</h1> 
    <p>the Earth Brings life</p> 
</div>    
<div class="content-slide"> 
    <h1>HELLO</h1> 
    <p>Welcome to our site</p> 
</div>  
    <div class="content-slide"> 
    <h1>GEOMATICS</h1> 
    <p>Join Us</p> 
</div>   
    </section> 
    <!--==========End Video area==========--> 

Jetzt ist meine CSS-Code

.content { 
position: relative; 
width: 100%; 
} 
.content:before { 
/*Note: z-index of 1 or 0 can be used here*/ 
content: ''; 
position: absolute; 
background: rgba(31, 26, 23, 0.7); 
/*background: rgba(93, 171, 217, 0.3);*/ 
/* 
Note: Valid code (color HesiBlue: #5DABD9) 
background-color: #1F1A17; 
opacity: 0.4; 
filter: alpha(opacity=40);*/ 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
} 

.content-slide { 
position: absolute; 
width: 100%; 
left: 50%; 
top: 50%; 
-webkit-transform:translateX(-50%) translateY(-50%) ; 
-ms-transform: translateX(-50%) translateY(-50%); 
transform: translateX(-50%) translateY(-50%); 
/*min-height: 100%;*/ 
z-index: 1; 
    /* background-color: rgba(0,0,0,0.7);*/ 
} 
    .content-slide h1 { 

text-align: center; 
font-size: 65px; 
text-transform: uppercase; 
font-weight: 300; 
color: #fff; 
    /* padding-top: 15%; 
    margin-bottom: 10px;*/ 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-delay: 1s; 
    /*-webkit-animation-iteration-count: infinite;*/ 
    } 
    .content-slide p { 
    text-align: center; 
    font-size: 20px; 
    letter-spacing: 3px; 
    color: #aaa; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-delay: 1.5s; 
    /*-webkit-animation-iteration-count: infinite;*/ 
    } 

Mein JQuery ist

$(function(){ 
     /*Declarations*/ 

    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
    var contentH1 = ".content-slide h1"; 
    var contentP = ".content-slide p"; 

    /* reason we use one() instead on on() will only listen to the event once and then it will unbind itself */ 
    $(window).on("load", function(){ 

     $(contentH1).addClass('animated bounceInLeft'); 

     $(contentP).addClass('animated bounceInRight').one(animationEnd, 
      function() { 
      $(this).removeClass('animated bounceInRight'); 

      // event.stopPropagation(); 
     }); 
    }); 
}); 

Wie kann ich meine Animation verzögern ich versuchte .delay (15000) in jquery aber seine keine Verwendung

Answer 1

Versuchen Sie, die CSS-Regel "animation-delay: 3s;" auf das Element anzuwenden, auf das die Klasse animate.css angewendet wurde.

Zum Beispiel, wenn das HTML-Element <img src="..." class="animated flash"> hat animate.css darauf angewandt dann gilt

img{ 
animation-delay: 3s; 
} 

die Animation um 3 Sekunden zu verzögern.