Ken Burns Slideshow — Pan-Zoom Image Slider HTML CSS JS

The Ken Burns effect — named for the documentary filmmaker — brings still images to life by slowly panning and zooming across them. Applied to a slideshow, it turns a static gallery into cinematic motion. This snippet builds it in plain HTML, CSS, and vanilla JavaScript: slides that drift and zoom while crossfading, with captions, dot navigation, autoplay, and hover-pause — no library.

The pan-zoom is one keyframe

Each active slide runs a @keyframes that animates its transform from a slightly zoomed, offset start to a different scale and position over several seconds — a slow drift across the image. Because it animates transform (scale and translate), it is GPU-accelerated and smooth, and the image is sized background-size: cover so it always fills the frame even as it scales. Varying both scale and translate is what gives the effect its characteristic gentle camera-move feel rather than a plain zoom.

Re-triggering the motion per slide

The subtle bit: the pan animation must restart each time a slide becomes active, or only the first slide would ever move. When showing a slide, the snippet sets animation: none, forces a reflow (void offsetWidth), then clears it — the standard reflow trick that restarts a CSS animation. So every slide gets a fresh pan as it comes in, not just on initial load.

Crossfade, not cut

Slides are stacked and transition their opacity, so the outgoing image fades as the incoming one appears — a soft crossfade rather than a hard cut. Combined with the continuing pan underneath, the transition feels filmic. The caption fades out and back in on each change so text never abruptly swaps.

Autoplay with considerate controls

It advances automatically on an interval, but pauses while the pointer is over the stage so viewers can read a caption or study an image, and resumes on leave. Dot navigation lets you jump to any slide and resets the timer so a manual pick is not immediately overridden. These touches — hover-pause, timer reset on manual nav, active-dot indicator — are what separate a polished slideshow from a bare auto-rotator.

Drop-in with real photos

The demo uses gradients so it runs with no assets, but each slide accepts an img URL — set the background to your photo and it pans across the real image. Tune the durations, the pan keyframe start/end, and the crossfade length to taste. It is a clear, dependency-free reference for the Ken Burns transform animation, CSS-animation re-triggering, and a considerate autoplay slideshow. Worth keeping in mind with real photography: because the pan keyframe both scales up and translates the image, a tightly cropped subject can drift toward the edge of frame at the animation's extremes — leaving a little extra margin around the subject when sourcing or cropping images gives the pan room to move without ever cutting off the thing the photo is actually about. will-change: transform, opacity is set on every slide for the same reason performance-sensitive carousels use it: it hints to the browser to promote the element to its own compositor layer ahead of time, so the very first frame of a pan-zoom doesn't stutter while the browser allocates that layer mid-animation.