Make background fade out/in

Question

Is there any way I can use CSS3 to fade in and out a solid white background of a <div>? the content should remain visible so just the background should fade.

Any ideas using css3 transitions/transforms?

thank you for your help.

Sweeps

Answer 1

Sure, you can use the transition property directly on the background-color:

div {
   background-color: white;    

   /* transition the background-color over 1s with a linear animation */
   transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
div:hover {
   background-color: transparent;      
}

Here's an example of a red background fading out on :hover.

Janiculum

Didn't know you could actually animate the background color. I think that's a lot better than my solution :) – Hoarsen

@Hoarsen Transitions are pretty excellent but I'm looking forward to when we can drop all the browser specific prefixes. – Janiculum

you could use LESS / SASS and use the mixins there. At least makes it bearable if you're using lots of CSS3 properties. – Hoarsen

@Hoarsen I haven't tried LESS/SASS yet, but yeah, the prefixes definitely make a good argument for them. – Janiculum

thanks for the jsfiddle! here's a forked sample which fades out a background color after load jsfiddle.net/divzero/Ddhwx – Chapfallen

@WilliamDenniss Thank you! You just saved me a couple of hours of fooling around! – Nottinghamshire

Answer 2

You may find this useful for examples of image and background color fades: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

However using CSS 3 to do the transition will limit the effect to browsers that don't support it.

Feininger

Answer 3

You could have two divs in one container div. The first div contains the white background, the second one gets the content.

Then, use a CSS3 transform to animate the opacity of the first div to zero.

Hoarsen

Thanks for the suggestion. I eventually set the first color inline on the div and the second color (ie. white) external as background-color: white !important; as well as the transition property. – Muckraker