javascript - CSS3 のみの jQuery アニメーションへのソリューション

Question

これは jQuery のフィドルアニメーションです。

画像の高さが異なることを考慮して、CSSだけでこれを行うにはどうすればよいですか?

HTML:

<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg"/>
</div>

CSS:

.container {
  position:relative;
  width:1100px;
  height:480px;
  overflow:hidden;
  background-color:#000;
}
.image {
  position:absolute;
  max-width:100%;
  min-width:100%;

}

jQuery:

$(document).ready(function () {
  move();
});

function move() {
    $img = $(".image");
    diff = $img.height()-$img.parent().height(); 
    speed = diff * 50;
    $img.animate({
    bottom: -diff
    }, speed, 'linear', function(){
    $(this).animate({bottom:0}, speed, 'linear', move);   
    });
}