thing13

Arguments about AT-ATs aside, I’ve been reading a bit about CSS3 recently. Although I’m not necessarily a huge fan of the Ken Burns Effect, I was slightly surprised to find no results for ‘Ken Burns Effect CSS3’, so I tried some code…

On this site, the effect I wanted was letterbox-sized cropped versions of my Flickr pictures, so that they fit in with the text (like in this post).

I did this originally by using JavaScript: adding a class to the image I wanted to letterbox, and then grabbing it, adding a new element around it that had restricted height and overflow: hidden; and resizing things slightly.

Although this is quite involved, it did have the advantage of letting me add picture-specific values that could be read by the JS, so that I could have a different height and vertical focal point for each one…

(As you can see, I also grabbed the alt attribute value and inserted a caption under each image.)

The next step would have been to animate the image behind the letterbox, moving the background position gradually with something like glow.anim.css.

But I realised I could do the whole thing with CSS3…

Here’s the code:

<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>

…and the CSS (the dimensions are quirky, ignore them)…

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

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

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

The container acts as the letterbox, while the image inside is given special properties.

The :hover state is translated and scaled slightly (vary these values to get a different effect) while the normal image has the transition defined on it, which seems to mean that the animation returns to its starting place even if you unhover the image halfway though. The image is stretched slightly, which makes it slightly pixellated, but these are all things that could be tweaked.

I started playing with keyframe animations, too: this allows several stages of animation, rather than just one. You can move from the top to the bottom, then zoom slowly out, for example. Some people say that’s a step too far, but… I think it depends on what you’re doing.

It can be made to work in Firefox by adding -moz-transform rules as well, but I haven’t done that yet. In the meantime, as with other browsers, the images should just look like letterboxes, with no animation.

There’s a whole discussion to be had about CSS3’s pros and cons, progressive enhancement, standards, HTML5, Flash, the iPad, and all the rest, but… another time.