.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>Así que estoy tratando de hacer que mi "barra de navegación" haga una transición hacia afuera, pero solo hará una transición hacia adentro. Sé que las transiciones de degradado no son compatibles, pero ¿alguien sabe cómo hacerlo? Estoy bien con un trabajo alrededor también.
Los colores solo son visibles porque solo existen mientras se cierne sobre ellos. Simplemente mueva su fondo de degradado lineal a .nav-content a .
Además, especifica siempre qué propiedad animar ( color ) para evitar problemas de rendimiento.
.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>Conozco este pequeño truco para animar gradientes, puedes hacerlos dos veces más grandes usando el tamaño background-size: 200% y establecer background-position: left top y la transición a 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>