CSS gradients and -webkit-background-clip not allowing a transition-CodePudding

.nav-content a {
    color: #000;
    text-decoration: none;
    font-size: 1.1em;
    padding: 20px 40px 20px 40px;
    background-image: linear-gradient(90deg, #000, #000);
    -webkit-background-clip: text;
    font-family: 'Raleway', sans-serif;
    transition: .4s ease-in-out;
}
.nav-content a:hover {
    background-image: linear-gradient(90deg, #6E1D16, #E4DA1E, #D5347D, #15DAE7,#6E1D16, #E4DA1E, #D5347D, #15DAE7);
    -webkit-background-clip: text;
    color: rgba(0,0,0,.1);
    cursor: pointer;
}

<nav >

  <a>Home</a>
  <a>Contact</a>
  <a>About</a>
  
</nav>

So I am trying to get my "navbar" to do a transition-out, but it will only transition-in. I know that gradient transitions are not supported, but does anyone know how to do this? I am fine with a work around too.

CodePudding user response：

The colors are only visible because they only exist while hovering. Just move your linear-gradient background to .nav-content a.

Also, always specify what property to animate (color) to avoid performance issues.

.nav-content a {
    color: #000;
    text-decoration: none;
    font-size: 1.1em;
    padding: 20px 40px 20px 40px;
    -webkit-background-clip: text;
    font-family: 'Raleway', sans-serif;
    transition: color .4s ease-in-out;

    background-image: linear-gradient(90deg, #6E1D16, #E4DA1E, #D5347D, #15DAE7,#6E1D16, #E4DA1E, #D5347D, #15DAE7);
}
.nav-content a:hover {
    -webkit-background-clip: text;
    color: rgba(0,0,0,.1);
    cursor: pointer;
}

<nav >

  <a>Home</a>
  <a>Contact</a>
  <a>About</a>
  
</nav>

CodePudding user response：

I know of this little hack to animate gradients, you can make them twice the size using background-size: 200% and set background-position: left top and transition to background-position: right bottom

.nav-content a {
  background-image: linear-gradient(
    90deg,
    black 50%, /* ADDED THIS */
    #6E1D16,
    #E4DA1E,
    #D5347D,
    #15DAE7,
    #6E1D16,
    #E4DA1E,
    #D5347D,
    #15DAE7
  );
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: left top;

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  color: #000;
  cursor: pointer;
  font: 1.1em 'Raleway', sans-serif;
  padding: 20px 40px 20px 40px;
  text-decoration: none;
  transition: background-position 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.nav-content a:hover { background-position: right bottom }

<nav >
  <a>Home</a>
  <a>Contact</a>
  <a>About</a>
</nav>