CSS Images Level 4: cross-fade() example

You need a WebKit Nightly in order to properly see this page!

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%);
      

Via Eric: Animating two background images can be done using normal CSS Animations, so no special trickery is necessary there.