Question

I have a shadow added to the header of the site using jquery when scrolling down. However I would like to “fade in” the shadow when the class is added and fade out when removed.

Could that be done using CSS3?

This is the class added/removed when scrolling.

.header_shadow{-webkit-box-shadow: 0 10px 6px -6px #777;-moz-box-shadow: 0 10px 6px -6px #777;box-shadow: 0 10px 6px -6px #777;}

Thank you!

Answer 1

Use CSS transitions (add your prefixes as you will):

.header_shadow { 
    box-shadow: 0 0 0 0 #777;
    transition: box-shadow 3s ease-in-out;
}

.header_shadow.addshadow {
    box-shadow: 0 10px 6px -6px #777;
}

Here’s a fiddle