How to set interval in animated gradient text? - css

Question

I'm trying to set a interval while my animated gradient text is running but I don't know how to do it with CSS only.
I have 3 different colors and I'd like to initiate it in black, turn to colored and back to black again, like a loop.
HTML
<h2 className="gradient-text">
Text Exemple
</h2>
CSS
.gradient-text {
background: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB);
background-size:400%;
animation: text-gradient 8s linear infinite;
padding:5px 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
#keyframes text-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 50% 100%;
}
}
Is it possible using only CSS instead javascript?

Answer 1

Your animation-direction is by default set to normal. In order to get back to black in reverse order (i.e, black -> coloured -> black), set it to alternate. This will cycle between playing the animation forwards and backwards.
In order to set a play interval, (i.e, wait at black for a particular amount of time before resuming the animation), you can set two keyframes with no changes between the two. This will make your animation stay put for a set duration before resuming. You will have to increase the animation-duration if you want to retain the speed at which your animation plays.
Your CSS may look something like so:
.gradient-text {
background-image: linear-gradient(45deg, #000, #2FEBDC, #EB413B, #FFA300, #E422EB);
animation: text-gradient 10s linear alternate infinite;
padding: 5px 0;
background-clip: text;
background-size: 400%;
}
#keyframes text-gradient {
0% {
background-position: 0% 50%;
}
33% {
background-position: 0% 50%;
}
66% {
background-position: 50% 100%;
} /* In my example here, this keyframe at 66% is not needed as the animation is progressing linearly from 33% to 100% anyways... it can be omitted */
100% {
background-position: 100% 100%;
}
}