Animation-delay function not working on text (opacity)

Question

I'm trying to make an animation-delay on my animation. The animation is used on some text, and the animation-delay line doesn't seem to work.

Here is the code :

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

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

Does anyone have an idea ?

Answer 1

You need animation-fill-mode: both;

Without this line, your animation will only have any effect when it is actually running. That means at the 15 seconds delay, the animation has no effect on the .htitle whatsoever.

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