CSS background: cross-fade()

Multiple backgrounds are a nice thing to have, but wouldnt it be even better if we could cross-fade said multiple backgrounds for even more spectacular effects? The CSS Image Values and Replaced Content Module Level 4 promises that we can, and it has already been implemented in Webkit!

Displaying a single image.

background-image: cross-fade(url(logo-box.png),url(logo-bare.png),0%);

Displaying halfway through the second image.

background-image: cross-fade(url(logo-box.png),url(logo-bare.png),50%);

Displaying a complete cross-fade.

background-image: cross-fade(url(logo-box.png),url(logo-bare.png),100%);

Animating a cross-fade().

background-image: cross-fade(url(logo-box.png),url(logo-bare.png),0%);animation: fading 3s infinite;