Add shadow slowly using CSS3

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!

score 5 · Accepted Answer · answered Sep 05 '12 at 04:32

5

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

answered Sep 05 '12 at 04:32

Jason

51,583
38
133
185

That works for adding the shadows, but when removing the class the shadow disappears with no "animation". – Fede E. Sep 05 '12 at 04:38
actually, it does. just remove the class. I updated the fiddle to reflect this. – Jason Sep 05 '12 at 04:40
1

You are right! Thanks! I put the transition in the "starting" class and adding/removing the shadow class works like a charm. Thanks Jason! – Fede E. Sep 05 '12 at 04:42

score -1 · Answer 2 · answered Sep 05 '12 at 04:42

Like this way Demo

$('#box').mouseover(function() {
      $(this).delay(200).animate({
        'boxShadowX': '10px',
        'boxShadowY':'10px',
        'boxShadowBlur': '20px'
    });
});

$('#box').mouseout(function() {
      $(this).delay(200).animate({
        'boxShadowX': '0px',
        'boxShadowY':'0px',
        'boxShadowBlur': '0px'
    });
});

Add shadow slowly using CSS3

2 Answers2