在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>