Анимировать элементы по порядку в CSS

Question

Я как-то играл с тем, как появляются статьи ...

И я думал о том, чтобы сделать что-то подобное, чтобы каждый абзац появлялся после предыдущих:

div p {
  opacity: 0;
  transition: opacity 0.5s ease;
}

p:nth-of-type(1) {
  transition-delay: 0.5s;
}

p:nth-of-type(2) {
  transition-delay: 1.0s;
}

p:nth-of-type(3) {
  transition-delay: 1.5s;
}

p:nth-of-type(4) {
  transition-delay: 2.0s;
}

div:hover p {
  opacity: 1;
}

<p>Hover below:</p>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Этот крошечный фрагмент работает «красиво», но…

Как это можно сделать легко, только с собственным CSS, чтобы он правильно управлял текстом с - скажем, сотней абзацев?

---

⋅ ⋅ ⋅

Вот мой текущий "макет статьи".

Я спросил здесь, потому что пытался его оптимизировать!

table p {
  opacity: 0;
  transition: opacity 0.5s ease;
}

table img {
  transform: rotateY(90deg);
  transition: transform 1s ease;
}

tr:nth-of-type(1) p {
  transition-delay: 1.0s;
}

tr:nth-of-type(1) td:nth-of-type(2) img {
  transition-delay: 1.25s;
}

tr:nth-of-type(1) td:nth-of-type(3) img {
  transition-delay: 1.5s;
}

tr:nth-of-type(1) td:nth-of-type(4) img {
  transition-delay: 1.75s;
}

tr:nth-of-type(2) p {
  transition-delay: 2.0s;
}

tr:nth-of-type(2) td:nth-of-type(2) img {
  transition-delay: 2.25s;
}

tr:nth-of-type(2) td:nth-of-type(3) img {
  transition-delay: 2.5s;
}

tr:nth-of-type(2) td:nth-of-type(4) img {
  transition-delay: 2.75s;
}

tr:nth-of-type(3) p {
  transition-delay: 3.0s;
}

tr:nth-of-type(3) td:nth-of-type(2) img {
  transition-delay: 3.25s;
}

tr:nth-of-type(3) td:nth-of-type(3) img {
  transition-delay: 3.5s;
}

tr:nth-of-type(3) td:nth-of-type(4) img {
  transition-delay: 3.75s;
}

table:hover p {
  opacity: 1;
}

table:hover img {
  transform: rotateY(0deg);
}

<p>Hover below:</p>
<table>
  <tr>
    <td>
      <p>Content</p>
    </td>
    <td><img src="http://placekitten.com/86/54"></td>
    <td><img src="http://placekitten.com/86/55"></td>
    <td><img src="http://placekitten.com/86/56"></td>
  </tr>
  <tr>
    <td>
      <p>Content</p>
    </td>
    <td><img src="http://placekitten.com/88/54"></td>
    <td><img src="http://placekitten.com/88/55"></td>
    <td><img src="http://placekitten.com/88/56"></td>
  </tr>
  <tr>
    <td>
      <p>Content</p>
    </td>
    <td><img src="http://placekitten.com/90/54"></td>
    <td><img src="http://placekitten.com/90/55"></td>
    <td><img src="http://placekitten.com/90/56"></td>
  </tr>
</table>

Answer 1

Вы можете смоделировать это, используя слой над элементами, которые вы анимируете, чтобы показать их один за другим:

div.box {
  position:relative;
  z-index:0;
  overflow:hidden;
}
div.box:before {
  content:"";
  position:absolute;
  z-index:1;
  top:-200%;
  left:0;
  right:0;
  bottom:0;
  background-image:linear-gradient(to bottom,transparent ,#fff 75%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:bottom;
  transition:background-size 2s,transform 0s 2s;
  transform-origin:0 83.25%;
}
div.box:hover::before {
  background-size:100% 0%;
  transform:scaleY(-1);
}

<p>Hover below:</p>
<div class="box">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>