.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 class="nav-content">
<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.
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 class="nav-content">
<a>Home</a>
<a>Contact</a>
<a>About</a>
</nav>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 class="nav-content">
<a>Home</a>
<a>Contact</a>
<a>About</a>
</nav>