Navigation menu color fade in on hover

Hello,

I used some code from another post to have my navigation links change color on hover and it works great. I was wondering if there is a way I can customize it so that the color fades in on hover. This site is a good example of what I'm wanting: https://www.mattnaylor.com/

This is the code I'm currently using:

.header-nav-item>a:hover {
    color: #8FB344 !important;
}
.header-nav-folder-item:hover a {
    color: #8FB344 !important;
}
/* desktop*/
.header-nav-item--active>a {
    color: #8FB344 !important;
}
/* folder */
.header-nav-folder-item--active a {
    color: #8FB344 !important;
}

Thanks!

9 hours ago, tuanphan said:

Change your code to this

header#header a {
		transition: all 0.3s ease;
}
.header-nav-item>a:hover {
    color: #8FB344 !important;
	transition: all 0.3s ease;
}
.header-nav-folder-item:hover a {
    color: #8FB344 !important;
	transition: all 0.3s ease;
}
/* desktop*/
.header-nav-item--active>a {
    color: #8FB344 !important;
}
/* folder */
.header-nav-folder-item--active a {
    color: #8FB344 !important;
}

 

Perfect! Thank you so much!