jquery - 淡入和脉冲文本，延迟然后淡出 CSS3 动画？

Question

我一直在尝试为我网站上的一段文字创建效果，但运气不佳。我希望用 CSS 创建它，但如果有人也能建议一种使用 jQuery 的方法，那么我会尝试任何方法。

我基本上想淡入淡出，然后当它淡入时发出脉冲，然后延迟一定时间，然后淡出。我希望这发生在一个循环中。

我有一个幻灯片放映，我基本上希望四张幻灯片/标题中的每一张都淡入当前设置在带有关键帧的循环上的每张相应幻灯片上。我需要能够将每个标题放入随附的幻灯片中。

例如:

<div>
    <ul>
      <li>
         <h2 class="title1">Title One</h2>
         <img src="../" />
      </li>
      <li>
         <h2 class="title1">Title Two</h2>
         <img src="../" />
      </li>
      <li>
         <h2 class="title1">Title Three</h2>
         <img src="../" />
      </li>
      <li>
         <h2 class="title1">Title Four</h2>
         <img src="../" />
      </li>
    </ul>
</div>

Answer 1

我们可以尝试使用Animate.css - https://github.com/daneden/animate.css

$('.title1').addClass('animated pulse');

$('.title1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);