Ken Burns Effect: CSS Keyframe Animation

Ken Burns Effect

The documentary move: a slow push in and drift across a still picture, then back out. The image scales and translates inside an overflow: hidden frame, so the frame never moves.

Also known as: ken burns effect css, slow zoom and pan image css, image zoom animation css.

Color Base size 16px Dark background

HTML

<div class="kfa-ken-burns-effect"><svg class="kfa-ken-burns-effect-img" viewBox="0 0 260 150" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="260" height="150" fill-opacity="0.08" /><circle cx="186" cy="46" r="17" fill-opacity="0.45" /><path fill-opacity="0.3" d="M0 108 42 66l30 26 42-44 46 46 34-30 66 44v42H0Z" /><path fill-opacity="0.6" d="M0 122c30-18 58-22 92-8s70 12 104-6 50-12 64-4v48H0Z" /><path d="M0 138c44-10 92-12 140-2s84 6 120-4v18H0Z" /><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M60 40q5-5 10 0q5-5 10 0M92 30q4-4 8 0q4-4 8 0" /></svg></div>

CSS

.kfa-ken-burns-effect {
  --c: var(--kfa-color, #3b82f6);
  font-size: var(--kfa-size, 16px);
  width: 13em;
  height: 7.5em;
  overflow: hidden;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.kfa-ken-burns-effect-img {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  transform-origin: 70% 40%;
  animation: kfa-ken-burns-effect-kf 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes kfa-ken-burns-effect-kf {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.35) translate(-6%, 4%); }
}

@media (prefers-reduced-motion: reduce) {
  .kfa-ken-burns-effect, .kfa-ken-burns-effect *, .kfa-ken-burns-effect::before, .kfa-ken-burns-effect::after, .kfa-ken-burns-effect *::before, .kfa-ken-burns-effect *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --kfa-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --kfa-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar keyframe animations