javascript - Animate.css 延迟动画，如何使用 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();
        });
    });
});

我如何延迟我的动画我在 jquery 中尝试了 .delay(15000) 但它没有用

Answer 1

尝试将 CSS 规则“animation-delay: 3s;”应用于应用了 animate.css 类的元素。

例如，如果 html 元素 <img src="..." class="animated flash">应用了 animate.css 然后申请

img{
animation-delay: 3s;
}

将动画延迟 3 秒。