Issue
.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.
Solution
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>
Answered By - Rickard Elimää
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.