3

How do I add an animation from plain color to background gradient color when hovered? Possibly when hovered from left to right?

I have this sample code but when hovered it is too instant when changing the colors.

I've tried using these references:

Use CSS3 transitions with gradient backgrounds

Animating Linear Gradient using CSS

But can't seem to figure out how to have an easiest approach for the hover. Other references say to add pseudo after element when hovered, but it seems a bit complicated when using it. Just want to use the hover element when animating the gradient text to it.

How to add a transition with these types of gradient text colors?

SAMPLE CODE:

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:all 0.4s ease-in-out;
}

.hover-grad-txt:hover {
  background-image:linear-gradient(to right, #01A5F8, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<span class="hover-grad-txt">Spear</span>
laurence keith albano
  • 1,409
  • 4
  • 27
  • 59
  • 1
    Could you explain what 'possibly hovered from left to right' would mean? Is the linear-gradient to move as the user moves the mouse from left to right over the element? – A Haworth Aug 12 '22 at 07:55
  • for your reference, the answer you accepted exists in the duplicate and not only one time but many times – Temani Afif Aug 12 '22 at 10:32

3 Answers3

5

To animate it, instead of trying to animate the gradient, you could animate it's position.

Let's use a new linear gradient for you background.
It will go from the solid color, then it will be a gradient to your first color from the gradient, then it will be a gradient to the second color of your gradient.

Something like this:
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);

Then you adapt the size to only see the solid color:
background-size: 300% 100%;

And it's position:
background-position: top left;

All you need to do on hover is to move it:
background-position: top left 100%;

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  background-position: top left;
  transition:all 1s ease-in-out;
}

.hover-grad-txt:hover {
  background-position: top left 100%;
}
<span class="hover-grad-txt">Spear</span>
Amaury Hanser
  • 3,191
  • 12
  • 30
3

Using new CSS properties, you could also do it like this:

<!DOCTYPE html>
<html>
    <head>
        <style>
            @property --a {
                syntax: '<color>';
                inherits: false;
                initial-value: #191335;
            }

            @property --b {
                syntax: '<color>';
                inherits: false;
                initial-value: #191335;
            }

            .hover-grad-txt {
                transition: --a 0.5s, --b 0.5s;
                font-size: 100px;
                text-align: center;
                background-image: linear-gradient(to right, var(--a), var(--b));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .hover-grad-txt:hover {
                --a:#01A5F8;
                --b: #01BFD8;
            }
        </style>
    </head>
    <body>
        <span class="hover-grad-txt">Spear</span>
    </body>
</html>

Keep in mind it only works in Chrome. Also, look at this question.

ViolinFour
  • 74
  • 3
1

In addition to these answer, you could also utilize @keyframes to specify the animation code. Example here is setting pretty as the @keyframe and placing rgba value with Alpha set to 0 to ensure hovering occurs still. I place crimson color as to see the changes more obvios.

.hover-grad-txt {
  background: linear-gradient(to right, crimson, #01A5F8, #01BFD8);
  background-size: 200% 200%;
  animation: pretty 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip: text;
  transition: color 1s ease-in-out;
  font-size: 100px;
}

.hover-grad-txt:hover {
  color: rgba(0, 0, 0, 0);
}

@keyframes pretty {
  0% {
    background-position: left
  }
  50% {
    background-position: right
  }
  100% {
    background-position: left
  }
}
<div class="hover-grad-txt">Spear</div>
yai
  • 72
  • 11