0

I have a text in a span that I would like to animate it smoothly in a Gradient motion. In short that it would start from a certain dark color and get smoothly brighter.

My CSS:

.span-focus{
    animation:myfirst 1s infinite;
    -webkit-animation: myfirst 1s infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

@keyframes myfirst{
    0% {background-image: linear-gradient(62deg, #ff5f02 0%, #ffb700 100%);}
    25% {background-image: linear-gradient(62deg, #ff6c17 0%, #fdbc16 100%);}
    50% {background-image: linear-gradient(62deg, #fd7e35 0%, #ffc533 100%);}
    75% {background-image: linear-gradient(62deg, #fc9255 0%, #fcc94a 100%);}
    100% {background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);}
}

The animation is not quite smooth as I want it, and switches more like blinking lights, is there a smarter way to not add exactly every percentage color point and create a smooth animation?

Alsakka
  • 155
  • 10
  • while this doesn't directly answer your question, you could use `animation-direction: alternate-reverse` to make the transition between the colors seem more "natural" instead of jumping from `#FBAB7E` to `#ff5f02` as those two colors seem pretty far away from each other. – Sigurd Mazanti May 31 '22 at 11:17
  • Tried to apply it but I might have done it wrong as I didn't see much of a change @SigurdMazanti – Alsakka May 31 '22 at 11:30
  • what it does is make the animation go from 0% > 100% and then afterwards from 100% > 0%, instead of going from 0% > 100% continuously – Sigurd Mazanti May 31 '22 at 11:32

1 Answers1

-1

You can't animate background images smoothly unfortunately. I would try more layers for the background with filter: hue-rotate and clip-path.

Ronald Rimele
  • 47
  • 3