How to add transition animation to gradient text background when hovered?

user_3144998 0
Viewed 110

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>

css html
3 Answers

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>

user_71006280

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.

user_140774740

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>

user_194837650
Related