Animate.css延遲動畫，如何使用animate.css創建幻燈片

我有一個小問題..肯定它已經解決了，但已經能夠看到它的任何stackoverflow解決方案..所以我想問Animate.css延遲動畫，如何使用animate.css創建幻燈片

我創建了一個視頻幻燈片，我想在幻燈片中滾動，滑動沒有圖片，只是字幕

我使用的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的，但它沒有用

來源

2017-02-04 Boiy

請..我需要幫助... – Boiy

嘗試將CSS規則「animation-delay: 3s;」應用於應用了animate.css類的元素。

例如，如果HTML元素<img src="..." class="animated flash">已animate.css施加到其然後應用

img{ 
animation-delay: 3s; 
}

3秒延遲動畫。

來源

2017-09-29 17:12:06

Animate.css延遲動畫，如何使用animate.css創建幻燈片

回答

相關問題