CSS内容延迟加载

Question

我正在使用CSS的content属性在HTML标签之前添加内容。

span::before {
    content: 'content that needs a delay';
}

<span></span>

有没有一种方法可以通过 CSS 延迟内容的可见性？

- Sampath Liyanage

---

我认为你不能用CSS完成这个任务。你可以使用jQuery函数“show”来实现。http://api.jquery.com/show/ 在这里查看。 - Akshey Bhat

@AksheyBhat 你不能在伪元素上使用JS，因为它们不在DOM中。 - Paulie_D

Answer 1

span::before {
    content: 'content that needs a delay';
     margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 4s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

<span></span>

- Gowtham

Answer 2

尝试使用 css-animation。

span::before {
  content: 'content that needs a delay';
  opacity: 0;
  animation: 2s fadeIn;
  animation-fill-mode: forwards;
  transition: opacity 1.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<span></span>

- Jinu Kurian

---

根据MDN的说明，visibility属性是可动画化的，但它只会从不可见一步到可见。 - Denis Sheremet

我知道了。只是想强调使用CSS动画来实现他想要的效果的重要性。使用不透明度就可以完成任务。 - Jinu Kurian

Answer 3

使用CSS动画时，应使用css的animation-fill-mode:forwards或其他方式，在动画完成后保留内容，否则内容将被隐藏。

span::before {
    content: 'content that needs a delay';
    -webkit-animation:0.6s opc forwards;
    opacity:0;
    transition:opacity 0.6s;
}

@-webkit-keyframes opc{
 from{
   opacity:0;
 }
 to{
   opacity:1;
 }
}

<span></span>

- frnt

---

你也可以使用 overflow: hidden 或者 transform: translateX 来将 max-width 从0动画到一个很大的值，或者将一个很大的值动画到0。 - Denis Sheremet

@DenisSheremet，确实有许多我们可以使用的选项，但是当我们将其不透明度设置为0时，我们并没有隐藏该元素，而是只是降低了它的不透明度。然而，如果您隐藏一个元素并且您附近有一些元素，则附近的元素会取代您的位置，并在加载即执行动画时，您可以看到附近的元素向右移动，尝试一下，您就会明白我的意思 :-) - frnt