Ken Burns animation generator

Your images will not be saved anywhere
Preset:
Animation settings
Reload animation
Code Copied!
/**
 * ----------------------------------------
 * animation class
 * ----------------------------------------
 **/

.kenburns-top-left {
    -webkit-animation: kenburns-top-left 5000ms ease-in-out both;
    animation: kenburns-top-left 5000ms ease-in-out both;
}

/**
 * ----------------------------------------
 * animation kenburns-top-left
 * ----------------------------------------
 **/

@-webkit-keyframes kenburns-top-left {
  0% {
     -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 16%;
    transform-origin: 16% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, -15px);
    transform: scale(1.25) translate(-20px, -15px);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
}
@keyframes kenburns-top-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 16%;
    transform-origin: 16% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, -15px);
    transform: scale(1.25) translate(-20px, -15px);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
}