Ken Burns CSS Animation Effect

Effetto movimento sul bg.

HTML

<h1>Ken Burns CSS Animation Effect</h1>

<picture class="gallery kenburns">
  <img src="https://brandontran.com/images/top-gun-maverick-1.jpg" width="1000" height="560">
</picture>

CSS

html, body {
  padding: 0; 
  margin: 0;
}
.gallery {
  width: 100%;
  height: 56vw;
  overflow: hidden;
  border: 2px dashed red;
  box-sizing: border-box;
  display: block;
}
.gallery img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

@keyframes kenburns {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    transform: scale3d(1.3, 1.3, 1.3) translate3d(-9%, -4%, 0px);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  100% {
    transform: scale3d(1.35, 1.35, 1.35) translate3d(-7%, -4%, 0px);
    opacity: 0;
  }
}

.kenburns img {
  animation: kenburns 25s infinite;
}

See the Pen
Ken Burns CSS Animation Effect by Brandon Tran (@brandonleetran)
on CodePen.