动画延迟 function 不适用于文本（不透明度）

Question

我正在尝试在我的 animation 上进行动画延迟。 animation 用于某些文本，并且动画延迟线似乎不起作用。

这是代码：

.wtitle {
opacity:100%;
animation-name: afade;
animation-duration: 1s;
animation-delay: 15s;
}

@keyframes afade {
from {
    opacity:0;
}
to {
    opacity:100%;
}
}

有人有想法吗？

Answer 1

你需要animation-fill-mode: both;

如果没有这条线，您的 animation 只有在实际运行时才会有任何影响。 这意味着在 15 秒延迟时，animation 对.htitle没有任何影响。

 .wtitle { opacity:100%; animation-name: afade; animation-duration: 1s; animation-delay: 2s; animation-fill-mode: both; } @keyframes afade { from { opacity:0; } to { opacity:100%; } }

 <h1 class="wtitle">Hello</h1>

Answer 2

.wtitle {
  opacity: 100%;
  background: red;
  animation-name: afade;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

您缺少 1 个属性。