Image cross fade

CSS4 feature that cross fades images

HTML

<p>This example uses the propsed CSS4 feature that cross fades images. It currently only works (with limited support) with nightly builds of webkit as well as Chrome.</p>

<h3>Crossfade Demo</h3>
<div class="crossfade image">&nbsp;</div>

<h3>Expected result</h3>
<img src="http://dl.dropbox.com/u/1621719/development/JSFiddle/images/crossfade-result.jpg">

CSS

body {margin:10px;font-family:Arial}
h3 {margin:10px 0 0 0;font-size:1.5em}
.crossfade {
  margin-bottom:30px;
  background-image: -webkit-cross-fade(
        url(http://dl.dropbox.com/u/1621719/development/JSFiddle/images/1.jpg), 
        url(https://inkbunny.net/files/full/789/789050_DiaperPony_rockin_that_diaper_c-01.png), 50%);
  background-image: -moz-cross-fade(
        url(http://dl.dropbox.com/u/1621719/development/JSFiddle/images/1.jpg), 
        url(https://inkbunny.net/files/full/789/789050_DiaperPony_rockin_that_diaper_c-01.png), 50%);
  background-image: -ms-cross-fade(
        url(http://dl.dropbox.com/u/1621719/development/JSFiddle/images/1.jpg), 
        url(https://inkbunny.net/files/full/789/789050_DiaperPony_rockin_that_diaper_c-01.png), 50%);
  background-image: -o-cross-fade(
        url(http://dl.dropbox.com/u/1621719/development/JSFiddle/images/1.jpg), 
        url(https://inkbunny.net/files/full/789/789050_DiaperPony_rockin_that_diaper_c-01.png), 50%);
  background-image: cross-fade(
        url(http://dl.dropbox.com/u/1621719/development/JSFiddle/images/1.jpg), 
        url(https://inkbunny.net/files/full/789/789050_DiaperPony_rockin_that_diaper_c-01.png), 50%);
}
.image {width:500px;height:410px}