Help adjusting CSS code (Ken Burns effect)

[adamelm]

I'm using a photo website which allows me to customise with CSS. I'm using the code below to give a ken burns effect (zooms and pans the image).. .however it currently zooms/pans to the top right.. I'd like to adjust the code so it randomly changes which direction it pans/zooms. Anyone able to help? thanks

@keyframes kenburns {

    0% {

      opacity: 0;

    }

    5% {

      opacity: 1;

    

    }

    95% {

        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

          -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

          -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

          -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

        animation-timing-function: ease-in;

        opacity: 1;

    }

    100% {

          -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

          -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

          -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);

        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px)

      opacity: 0;

    }

 

}

 

[EkBass]

This is something you could try out. See more at translate3d() - CSS: Cascading Style Sheets | MDN

  95% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px + 50px * Math.random(), -120px + 50px * Math.random(), 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px + 50px * Math.random(), -120px + 50px * Math.random(), 0px);
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px + 50px * Math.random(), -120px + 50px * Math.random(), 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px + 50px * Math.random(), -120px + 50px * Math.random(), 0px);
    animation-timing-function: ease-in;
    opacity: 1;
  }

 

[adamelm]

Thanks for the help, unfortunately this didn't work... it did exactly as it did before . any other ideas?

 

[gulshan212]

Well, there are some logical errors with your code, you can try the below code to fix this error.

@keyframes kenburns {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
95% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(
calc(-190px + (100px * random())),
calc(-120px + (80px * random())),
0px
);
animation-timing-function: ease-in;
opacity: 1;
}
100% {
transform: scale3d(2, 2, 2) translate3d(
calc(-170px + (120px * random())),
calc(-100px + (70px * random())),
0px
);
opacity: 0;
}
}

Thanks

 

[Johna]

Well, there are some logical errors with your code, you can try the below code to fix this error.

@keyframes kenburns {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
95% {
transform: scale3d(1.5, 1.5, 1.5) translate3d(
calc(-190px + (100px * random())),
calc(-120px + (80px * random())),
0px
);
animation-timing-function: ease-in;
opacity: 1;
}
100% {
transform: scale3d(2, 2, 2) translate3d(
calc(-170px + (120px * random())),
calc(-100px + (70px * random())),
0px
);
opacity: 0;
}
}

Thanks

AFAIK there's no such thing as random() in CSS.

You will either need to use a CSS pre-processor or use JavaScript to generate some form of random value.