javascript - 通过纯 CSS 在超时后渲染一个组件

Question

我知道有一种方法可以实现组件在给定超时后呈现的效果，但我想通过过渡在纯 CSS 中实现。问题是，在查看使用 css 转换的教程时 - 您通常必须将鼠标悬停在元素上才能触发动画 - 但就我而言 - 我只是希望元素在渲染 2 秒后变得可见。我怎样才能做到这一点？

Answer 1

动画可以提供帮助:

p {
  opacity:0;
  animation:show 5s 2s forwards;
}
@keyframes show {
  to {opacity:1}
}

<p>see me</p>

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after its execution.