My background-image gradient on text transition is not working

Question

i'm trying to use background-image to add gradient on text but the transition to another gradient on hover is not working.

#footer .footer-newsletter .footer-top .contato {
  font-size: 28px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  background-image: linear-gradient(90deg, #ffc746 20%, #f3bb3a 40%, #e7b02e 60%, #daa520 80%, #cd9a0e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
  text-decoration: none;
  -webkit-transition: background-image 0.5s ease-in-out;
  transition: background-image 0.5s ease-in-out;
}

#footer .footer-newsletter .footer-top .contato:hover {
  background-image: linear-gradient(90deg, #cd9a0e 20%, #daa520 40%, #e7b02e 60%, #f3bb3a 80%, #ffc746 100%);
  -webkit-transition: background-image 0.5s ease-in-out;
  transition: background-image 0.5s ease-in-out;
} 

Answer 1

Unfortunately, background-image is not currently "animatable" according to Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Fortunately, there may be a potential solution. Looking at this answer you could achieve a similar hover effect using pseudo elements (:before and :after) in combination with content for the text value. Using transition on opacity of the :before element can provide a fade-like effect into the :after gradient.

Warning: I don't know how practical this is since you would have to define the desired text as a style as opposed to being in the HTML.

.test {
  font-size: 28px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
}

.test:before, .test:after {
    content: "TESTING";
    position: absolute;
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 1;
    color: transparent;
}

.test:before {
    background-image: linear-gradient(90deg, #ffc746 20%, #f3bb3a 40%, #e7b02e 60%, #daa520 80%, #cd9a0e 100%);
    z-index: 1;
    transition: opacity 0.5s;
}

.test:after {
    background-image: linear-gradient(90deg, #cd9a0e 20%, #daa520 40%, #e7b02e 60%, #f3bb3a 80%, #ffc746 100%);
}

.test:hover:before {
    opacity: 0;
}

<div class="test"/>