The Ken Burns Effect using CSS Animations by kirupa | 18 September 2015

Ken Burns is a pretty famous (and award-winning) documentary film maker. While I haven't personally seen any of his documentaries, it's not cool to admit that publically. If you haven't seen any of his documentaries either, just pretend that you have. Your coolness quotient will certainly go up. Anyway, we aren't really here to talk about Ken Burns and how edumacationally amazing his documentaries are. Instead, we are here to talk about a camera effect he pioneered that I guarantee you've seen.

That effect, called the Ken Burns effect, looks something like this:

Your browser does not support inline frames or is currently configured not to display inline frames.

You can summarize this effect as follows: It is a slow pan and zoom of a static image. While that description sounds very boring, you can create a lot of neat effects with it - as you've probably seen in countless documentaries, crime shows, and anything else where you need to highlight something on a static image for a while.

In this tutorial, we are going to look at how to recreate this effect using a simple CSS Animation. Let's get started!

CSS and Transforms

In CSS, the stars of this effect are the translate3d and scale3d transforms that are responsible for panning and zooming the image. The translate3d transform moves the image left, right, up, or down:

The scale3d transform zooms your image in and out:

When you combine both of these transforms together with a slow animation, you have the Ken Burns effect. Understanding this is the hard part. The easy part is writing the CSS to make all of this work, and we'll look at all that in the next few sections.

Performance Note If you are familiar with CSS transforms, you are probably wondering why we aren't using the more appropriate scale and translate functions as opposed to their 3d equivalents. The reason has to do with performance. Both translate3d and scale3d rely on your graphics card, and that results in more performant animations on big and small devices! You can read more at this location.

Starting Point

If you want to actively follow-along, create a new HTML page and add the following lines of stuff into it:

<!DOCTYPE html> <html> <head> <title>The Ken Burns Effect in CSS</title> <style> h1 { font-family: monospace; font-size: 2.1em; color: #3399FF; } body { padding: 10px; background-color: #F4F4F4; } #imageContainer { background-color: #333; width: 450px; height: 300px; overflow: hidden; border: 2px #333 solid; } </style> </head> <body> <h1>The Ken Burns Effect in CSS</h1> <div id="imageContainer"> <img src="//www.kirupa.com/images/example_sm2.jpg"> </div> <script src="//www.kirupa.com/prefixfree.min.js"></script> </body> </html>

If you preview this page in your browser, you will see a simple page with a stationary image. The only interesting detail is what you see with the image itself. Our image is clipped (aka masked) by the boundaries of its parent container thanks to the following line of CSS:

#imageContainer { background-color: #333; width: 450px; height: 300px; overflow: hidden; border: 2px #333 solid; }

This means that we can freely zoom and pan the image without any care in the world. The viewport is maintained by the parent div element the image is contained by.

Adding the CSS Animation

Our CSS animation is fairly straightforward. It will use varying values of translate3d and scale3d to shift our image around. Let's start by translating that into keyframe values, so go ahead and add our keyframes (called kenburns) towards the bottom of your style tag:

@keyframes kenburns { 0% { opacity: 0; } 5% { opacity: 1; } 95% { transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px); animation-timing-function: ease-in; opacity: 1; } 100% { transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px); opacity: 0; } }

The real action happens starts at the 95% mark. Pay attention to what our transform declaration looks like:

transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

We zoom in on the image by 50% using scale3d, and we shift the image by 190 pixels horizontally and 120 pixels vertically using translate3d. We continue more of this at the 100% mark as well where we zoom and pan some more to fine tune the effect.

The last thing that remains is to define our CSS animation that ties our kenburns keyframes with a duration value. Add the following lines inside your style tag just above your keyframes declaration:

#imageContainer img { animation: kenburns 20s infinite; }

We specify that our animation will run for 20 seconds and loop the kenburns keyframes forever. If you save these changes and preview the page in your browser, you'll see the Ken Burns effect on your screen where the image slowly pans towards the guilty looking sheep that all the other sheep are staring at!

Vendor Prefixes To ensure your CSS animation works for the widest number of users, consider prefixing them for older browsers. This article goes into more detail on that.

Conclusion

So yeah, there you have it...the Ken Burns effect re-created in CSS using nothing more than a CSS Animation surrounded by some different values for the duration, transform, and easing properties. Here is an interesting tidbit. Ken Burns doesn't like to be asked about his pioneering work on this effect. Aren't you glad you learned that?

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.