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?

CodePudding user response：

• 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%;
    }
}