Animate.css delay Анимация, Как создать слайды с animate.css

Question

У меня небольшая проблема. Уверена, что она была решена, но была доступна для просмотра на любом решении stackoverflow. Поэтому я хочу задать

Я создаю слайд над видео, я хочу, чтобы слайд прокручивать, слайд не имеет изображения, только титры

я использую animate.css и JQuery, проблема у меня есть, я не могу показаться, чтобы время моего слайда задерживалось достаточно, чтобы зрители могли его прочитать, прежде чем он уйдет на следующий слайд, еще одна проблема: я не могу получить следующий слайд в

Ниже приведены коды

<!--==========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==========--> 

Теперь мой CSS код

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

Мой JQuery является

$(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(); 
     }); 
    }); 
}); 

Как я могу отложить мою анимацию я попытался .delay (15000) в JQuery, но не его использование

Answer 1

попробуйте применить правило CSS «animation-delay: 3s;» к элементу, к которому применяется класс animate.css.

Например, если элемент HTML <img src="..." class="animated flash"> имеет animate.css применяется к нему затем применить

img{ 
animation-delay: 3s; 
} 

задержать анимацию на 3 секунды.