Dieser CSS Code erlaubt es, ein Hintergrundbild per "Ken Burns Effekt" näher kommen zu lassen.

KenBurns auf Hintergrundbild (CSS)

/* #region KenBurns Effect */
.et_pb_section.ken-burns .et_parallax_bg {
  animation: kenburns-with-pause 60s alternate infinite;
}

@keyframes kenburns {
  0% {
    -ms-transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    -webkit-transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    animation-timing-function: linear;
  }
  100% {
    -ms-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
    -webkit-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
    transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
  }
}
@keyframes kenburns-with-pause {
  0% {
    -ms-transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    -webkit-transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    animation-timing-function: linear;
  }
  5% {
    -ms-transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    -webkit-transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    transform: scale3d(1.45, 1.45, 1.45) translate3d(-25px, -55px, 0px);
    animation-timing-function: linear;
  }
  95% {
    -ms-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
    -webkit-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
    transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
  }
  100% {
    -ms-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
    -webkit-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
    transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
  }
}
/* #endregion */