Ken Burns effect in CSS3

via http://thing13.net/2010/02/css3-ken-burns-effect-2/

HTML

<p class="sframe">
    <a href="http://www.flickr.com/photos/northover/3807482811/">
        <img src="http://farm3.static.flickr.com/2574/3807482811_a828b56d59.jpg" alt="Grass snake" width="375" height="500" />
    </a>
</p>

CSS

.sframe {
    height: 200px;
    width: 611px;
    overflow: hidden;
}

.sframe img {
    width: 627px;
    height: 478px;
    -webkit-transform: translate(0, 0);
    -webkit-transition: all 5s ease-in-out;
}

.sframe:hover img {
    -webkit-transform: translate(-13px, -200px) scale(1.3);
}