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

【问题标题】：Fade in and pulse text, delay then fade out with CSS3 animation?淡入和脉冲文本，延迟然后淡出 CSS3 动画？
【发布时间】：2014-03-24 23:34:05
【问题描述】：

我一直在尝试对我网站上的一段文字创建效果，但运气不佳。我希望用 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>

【问题讨论】：

标签： jquery html css fadein pulse

【解决方案1】：

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

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

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

【讨论】：

嘿，谢谢你的建议，我看过这个，但不知道如何为每个人应用这个？
这似乎奏效了，尽管我不知道如何将它设置在一个循环上，以便每个人都在应该触发动画时触发动画？
还因为我有我想要弹出的类型，由于某种原因，动画正在取消位置？ jsfiddle.net/86KLb/2

【解决方案2】：

您要求的 JQuery 解决方案..

http://jsfiddle.net/jFIT/9N5Aa/2/

doEffect($('li'));


function doEffect(ctrl){

 $(ctrl).fadeIn(500, function() {
   ctrl.effect( "pulsate", 5000 ).fadeOut(500);
   doEffect(ctrl);
  });
 }

【讨论】：

有没有什么办法可以看起来更像这样减去它不应该跳出位置的事实？ jsfiddle.net/86KLb/3
jsfiddle.net/jFIT/86KLb/4 你在容器上缺少position relative。 @user2498890
啊，我明白了，谢谢，你知道我如何将它应用到所有 4 个标题并将它们设置为循环 - 也许带有查询？
一个接一个或一次？ @user2498890
不用担心你帮了我很多。