Ken Burns Randomised direction help

[adamelm]

Hi folks..
I have a CSS code that I use on the photo platform SmugMug that provides a ken burns style effect. It works great, but the images only move in one direction, I'd like them to move in random different directions. Any help is really appreciated.. Existing code below

.sm-slideshow-image img {
  animation: kenburns 80s infinite;
 
}

@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;
    }
 
}

 

[lovebug]

Hi folks..
I have a CSS code that I use on the photo platform SmugMug that provides a ken burns style effect. It works great, but the images only move in one direction, I'd like them to move in random different directions. Any help is really appreciated.. Existing code below

.sm-slideshow-image img {
  animation: kenburns 80s infinite;
 
}

@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;
    }
 
}

there is some info about random numbers here

Random Numbers In CSS | CSS-Tricks

I stumbled into an interesting problem the other day. I wanted to animate an element with a random animation-duration. This was the non-randomized starting

css-tricks.com

it looks like you could replace the -190px and -120px with two variables assigned with random numbers to achieve it

 

[Johna]

Hi folks..
I have a CSS code that I use on the photo platform SmugMug that provides a ken burns style effect. It works great, but the images only move in one direction, I'd like them to move in random different directions. Any help is really appreciated.. Existing code below

.sm-slideshow-image img {
  animation: kenburns 80s infinite;
 
}

@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;
    }
 
}

Hey there, so in CSS there's no such thing as random values. You will have to use JavaScript.
I'm not sure if the SmugMug platform you mentioned supports JS, I doubt it, but if it does, then the link @lovebug posted my be helpful.

 

[lovebug]

its true that you usually need javascript to help your css but there seems to be a way to generate random looking numbers using pure css without javascript

https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd