为连续的文本行动画淡入和淡出答案

【问题标题】：Animating fade-in and fade out for successive lines of text为连续的文本行动画淡入和淡出
【发布时间】：2016-03-20 20:48:43
【问题描述】：

我正在尝试使用 Animate.css 库来实现以下目标：淡化“Simply Reiki”徽标以及一系列连续的 <p> 元素。每个<p> 都需要一个接一个地淡入淡出。

可以在Simply Reiki test page查看相关页面

观察

显然，“动画延迟”不起作用。每个<p> 元素立即与其他元素重叠。
似乎“两者”都不适用于 fadeIn 并执行淡出。

这是我的 HTML 和 CSS 的代码 sn-ps：

h1.animated {
  font-size: 5.5em;
  font-weight: normal;
  font-family: 'Allura', cursive;
  color: #e8e8ea;
  margin: auto;
  position: absolute;
  z-index: 1;
  animation: fadeIn forwards 7s 0.5s;
  opacity: 0;
}
p.animated {
  font-size: 1.5em;
  font-family: 'Muli', cursive;
  color: #e8e8ea;
  margin: auto;
  position: absolute;
  top: 105px;
  left: 45px;
  z-index: 1;
  opacity: 0;
}
p.animated1 {
  animation: fadeIn both 7s;
}
p.animated2 {
  animation-delay: 14s;
  animation: fadeIn both 7s;
}
p.animated3 {
  animation-delay: 21s;
  animation: fadeIn both 7s;
}

<div class="hero-text-wrapper">
  <h1 class="animated">Simply Reiki</h1>
  <p class="animated animated1">Pure · Positive · Powerful</p>
  <p class="animated animated2">Just for today, I will not be angry.</p>
  <br>
  <p class="animated animated3">Just for today, I will not worry.</p>
  <br>
  <p class="animated animated4">Just for today, I will be grateful.</p>
  <br>
  <p class="animated animated5">Just for today, I will do my work honestly.</p>
  <br>
  <p class="animated animated6">Just for today, I will be kind to every living thing.</p>
</div>

【问题讨论】：

三个问题意味着三个问题，请编辑您的问题
感谢您的回复，waqt。这是我关于 CS 的第一个问题，所以如果对我的问题的表达方式有任何担忧，我深表歉意。最终，手头的问题与淡入淡出连续的<p> 元素有关。我引用了关于我的代码的两个观察结果，这可能有助于推断答案。问候。

标签： css animation fadein fadeout

【解决方案1】：

像这样使用javascript

.quotes {display: none;}

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

// code gets installed at the end of the body (after all other HTML)
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();

另见工作演示： http://fiddle.jshell.net/jfriend00/n4mKw/show/

【讨论】：

非常感谢您的回复。我期待在本周晚些时候试一试。