Select Page

CSS Background Color Animation Demo

This experiment was inspired by a design talk at my office. We were examining whether is was possible to change a page’s background color while scrolling down that page. The speaker chose to use JavaScript to implement this feature, and added that it would be difficult or impossible to use only CSS. I took this as a challenge…

Some notes:

  • Is it possible to animate the <body> background color with CSS :hover events? NO!
  • Is it possible to fake an animated background color with :hover events? YES!
  • I based the CSS on a concept I found on stackoverflow.
  • I worked out the animations with jsfiddle.
  • These :hover events also work on iOS. Thanks to another hack found on StackOverflow.

The graphics on this page were sourced from the Lorem Ipsum Illustration library on Github.

SCROLL down to start the animated background color demo.

Background Color 1

Landscape Winter - CSS Background Color Animation - Baltimore, MD

Cupcake ipsum dolor sit amet macaroon. Dessert bonbon ice cream. Apple pie marzipan ice cream. Cake jelly-o macaroon cheesecake topping jelly chupa chups sweet danish. Oat cake bonbon cookie cake sesame snaps. Cake bonbon chocolate bar cupcake sugar plum jelly-o chocolate jelly beans icing. Chocolate dragée danish tiramisu. Sesame snaps bonbon cheesecake cheesecake pie powder bonbon.

Background Color 2

Fall Autumn Landscape Trees - CSS Background Color Animation - Baltimore, MD

Cupcake ipsum dolor sit amet macaroon. Dessert bonbon ice cream. Apple pie marzipan ice cream. Cake jelly-o macaroon cheesecake topping jelly chupa chups sweet danish. Oat cake bonbon cookie cake sesame snaps. Cake bonbon chocolate bar cupcake sugar plum jelly-o chocolate jelly beans icing. Chocolate dragée danish tiramisu. Sesame snaps bonbon cheesecake cheesecake pie powder bonbon.

Background Color 3

flowers - CSS Background Color Animation - Baltimore, MD

Cupcake ipsum dolor sit amet macaroon. Dessert bonbon ice cream. Apple pie marzipan ice cream. Cake jelly-o macaroon cheesecake topping jelly chupa chups sweet danish. Oat cake bonbon cookie cake sesame snaps. Cake bonbon chocolate bar cupcake sugar plum jelly-o chocolate jelly beans icing. Chocolate dragée danish tiramisu. Sesame snaps bonbon cheesecake cheesecake pie powder bonbon.