Is it normal for the image's edges to get cropped and cut off?

Yes — that cropping is the entire effect, not a bug. The inner image is scaled up beyond 100% (scale(1.2), for example) so it's bigger than its frame, giving it room to pan without ever showing empty space at the edges. The outer .ken-burns wrapper's overflow: hidden then clips that oversized, moving image to the frame's fixed size — exactly like a camera panning across a photograph larger than its viewfinder. If nothing were cropped, there'd be no illusion of movement.

What's the difference between Loop and a single play?

With Loop on, animation-iteration-count: infinite plus animation-direction: alternate makes the pan reverse back and forth forever. With Loop off, the animation plays once (animation-fill-mode: forwards) and holds on the end scale/position — better for a single hero image that shouldn't keep moving indefinitely.

Can I apply this to a real instead of a background-image div?

Yes — move the animation to an with object-fit: cover filling its parent instead of a background-image div; the same scale()/translate() keyframes work identically on either, since both are just animating the transform property.

Why use translate() percentages instead of pixels for the pan?

Percentage-based translate() scales with the element's own size, so the same pan values (like -4%, 3%) look proportionally correct whether the image box is 300px or 1200px wide — pixel values would need to be recalculated for every different container size.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS KEN BURNS EFFECT GENERATOR

Build a slow zoom-and-pan background effect, preview it live, and copy the CSS.

The image is intentionally larger than its frame, so its edges get cropped as it zooms and pans — that cropping is the whole effect, the same way a real camera pans across a photo bigger than its viewfinder. Watch the dots drift to see it clearly.

Start scale: 1.00xEnd scale: 1.20xPan X: -4%Pan Y: 3%Duration: 14sLoop back and forth

Color 1

Color 2

.ken-burns {
  overflow: hidden;
  border-radius: 10px;
}

.ken-burns-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation-name: ken-burns-pan;
  animation-duration: 14s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ken-burns-pan {
  from {
    transform: scale(1) translate(0%, 0%);
  }
  to {
    transform: scale(1.2) translate(-4%, 3%);
  }
}

How to use the Ken Burns effect

1
Watch the preview loop through its slow zoom and pan.
2
Set a start and end scale to control how much the image zooms.
3
Set the pan X/Y percentages to control the drift direction.
4
Tune duration and whether it loops back and forth or plays once.
5
Copy the CSS and HTML, then set your own image as the background-image.

Questions

Is it normal for the image's edges to get cropped and cut off?: Yes — that cropping is the entire effect, not a bug. The inner image is scaled up beyond 100% (scale(1.2), for example) so it's bigger than its frame, giving it room to pan without ever showing empty space at the edges. The outer .ken-burns wrapper's overflow: hidden then clips that oversized, moving image to the frame's fixed size — exactly like a camera panning across a photograph larger than its viewfinder. If nothing were cropped, there'd be no illusion of movement.
What's the difference between Loop and a single play?: With Loop on, animation-iteration-count: infinite plus animation-direction: alternate makes the pan reverse back and forth forever. With Loop off, the animation plays once (animation-fill-mode: forwards) and holds on the end scale/position — better for a single hero image that shouldn't keep moving indefinitely.
Can I apply this to a real <img> instead of a background-image div?: Yes — move the animation to an <img> with object-fit: cover filling its parent instead of a background-image div; the same scale()/translate() keyframes work identically on either, since both are just animating the transform property.
Why use translate() percentages instead of pixels for the pan?: Percentage-based translate() scales with the element's own size, so the same pan values (like -4%, 3%) look proportionally correct whether the image box is 300px or 1200px wide — pixel values would need to be recalculated for every different container size.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.