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

Question

我正在尝试对我的动画进行动画延迟。动画用在了一些文字上，动画延迟线似乎不起作用。

这是代码：

.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;

如果没有这一行，您的动画只有在 运行 时才有效。这意味着在 15 秒延迟时，动画对 .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 个属性。