Header transparency fade in animation.

From the comments section over on Enfold:

“Hey Kriesi,

How can I apply this affect (.html_header_transparency #header_meta) to my transparent header? This is the current effect on the meta area above the header, but I’d like to apply it on the #header_main also.

Either that or change the color of the font in my transparent header when the user scrolls.

The reason is because the color of the menu is white, and so is the background of my main content… so when you scroll, you lose the text.

Here’s the website if you want to see what I’m talking about. http://gwinnettgarage.com/”

Yeets response:

Hi!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
#header_main {
background: black;
}
.av_header_transparency #header_main {
background: transparent;
}
If you have any other questions or issues, please start a thread on our support forum – https://kriesi.at/support/ :)

*******************************************************************************************************************************************************************

This worked, but without the .4s fade in transition effect on the transition from transparent to black.

Without the fade in – it causes the header to change to opaque black prior to the header meta changing.

How do I apply that same .4 second delay to the transition that the header meta has?

Regards,
Chad