Javascript Animate.css延迟动画，如何使用Animate.css创建幻灯片

我有个小问题。。我确信它已经被解决了，但是我可以在上面看到任何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==========-->

我的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中尝试的动画。延迟（15000）但没有用

尝试将CSS规则“

动画延迟：3s；

”应用到应用了animate.CSS类的元素

例如，如果html元素

应用了animate.css 然后申请

img{
animation-delay: 3s;
}

---

将动画延迟3秒。

请。。我需要你的帮助。。。

img{
animation-delay: 3s;
}