Rotate image from random start location in React using Keyframes

Question

Using React, I have a component that I want to start rotated from a random location and rotate 360 degrees infinitely. What I have is:

HTML:

return <img className={`${props.className}`} style={{
        animation: `spin 5s linear infinite`,
        transform: `rotate(${Math.floor(Math.random() * (361));}deg)`
    }} src={image} alt="img"/>

CSS:

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

By default, what this does is ignore the transform, load the image so that it is upright (i.e. 0 degrees), and rotate to 360 degrees (vertical again) over the course of 5 seconds. What I want is a way for from to be transform:rotate(deg);} and to to be {transform:rotate(<SOME RANDOM NUMBER + 360>deg);}. Is this possible?

As a side note, is it possible to randomize the direction it travels?

Answer 1

You can't get the required effect using transform rotate - as you have noted the animation will immediately alter this to rotate(0).

But what you can do is leverage the animation-delay CSS property.

Instead of calculating a random rotation, calculate a random time between 0 and 5 seconds and use that, negative, to set animation-delay.The animation will start part way through its cycle, at a random point and so at a random angle.

Here's a pure CSS/HTML/JS snippet with the rotation slowed down so it's easier to see that the rotation does start at a different angle each time:

const spinner = document.querySelector('.spin');
spinner.style.setProperty('--delay', Math.floor(Math.random() * 50));

.spin {
  width: 100px;
  height: 100px;
  background: red;
  animation: spin 50s linear infinite;
  animation-delay: calc(var(--delay) * -1s);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="spin"></div>