CSS text background hover effect behaving strangely on mouseout

Question

I've implemented a hover effect on a h1 element (see code and pen below), but the effect is behaving strangely on mouse out and sort of flickering before going back to it's original state.

Any ideas how to make it transition back to it's original color as smoothly as it fades in on hover?

Thanks in advance.

https://codepen.io/lobodemon/pen/YOXKNJ

h1 {
  transition: 0.5s;
}

h1:hover {
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
    0%, 100% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
}

@-moz-keyframes Gradient {
    0%, 100% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
}

@keyframes Gradient {
    0%, 100% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
}

<h1>The Title</h1>

Answer 1

The issue is that you are trying to combine an animation with transtion which will not work like you expect. By adding a transtion you will not make the animation go smooth. In other words, you cannot add transtion to animation.

Since you made the duration of the animation to be 15s on hover, I don't think the infinite is needed in this case because no one will keep hovering more than 15s, so you can change this into a transition and it will be smooth.

I have added the black color to the gradient to have our initial state then with a transition we can do half the initial animation and at the end you will have a 7s duration which is somehow enough for a hover effect:

h1 {
  transition: 7s;
  background: 
    linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB,#000);
  background-size: 400% 400%;
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: 0 0;
}

h1:hover {
  background-position: 100% 50%;
  
}

<h1>The Title</h1>