Transition Animation of CSS Gradient for background-clip: text

Smooth animation for CSS gradient clipped to text. As we all know, we can’t animate backgrounds with transition. So I’m moving gradients to make a perfect animation with transition on hover, without creating separate animation frames.

Here I needed to animate from solid color to gradient.

First I’m making background-size: 400% 400%, and then can easily create linear-gradients with initial color and hover color together. Like so:

.nav-menu a {
  color: #3c3d42;
  background-color: #3c3d42;
  background: linear-gradient(80deg, #ff2453 0%, #a21da6 25%, #3c3d42 75%) no-repeat 100% 100%;
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 300ms ease-in-out 5ms;
}
.nav-menu a:hover, .nav-menu a:active, .nav-menu .current-menu-item a {
  background: linear-gradient(90deg, #ff2453 0%, #a21da6 25%, #3c3d42 75%) no-repeat 100% 0%;
  background-position: 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400% 400%
}

You can play more with gradient angle etc. Works great.