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

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 个属性。