Why is the logo not spinning forever?

Question

TSX:

function Content() {
  return (
    <>
    <main id="main">
        <img src="/vite.svg" id="logo" />
    </main>
    </>
  );
}

export default Content;

CSS:

:root {
  font-family:  sans-serif, Arial !important;
}

#main #logo {
  animation-name: spin;
}

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

I tried nothing and was expecting the react logo spin animation but on the vite image.

You need to specify [`animation-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) and [`animation-iteration-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) (e.g. `spin 2s infinite`). Also, `rotateY(360)` should be `rotateY(360deg)`. — InSync, Apr 19 '23 at 03:16
Sorry if I didn't made it clear: `animation: spin 2s infinite` or `animation-name: spin; animation-duration: 2s; animation-iteration-count: infinite;` — InSync, Apr 19 '23 at 03:25

score 2 · Answer 1 · edited Apr 19 '23 at 03:29

2

You'll need to provide it the count like the following snippet:

#logo {
  animation: spin 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

edited Apr 19 '23 at 03:29

Mike 'Pomax' Kamermans

49,297
16
112
153

answered Apr 19 '23 at 03:27

Bobby Mulligan

21
3

score 2 · Answer 2 · answered Apr 19 '23 at 03:32

you need to specify that for how long you want to make the logo animate.

animation: spin 2s linear infinite;

Here, spin is your animation name, 2s is the interval in which one spin gets completed, linear is the timing function and infinite is the iteration count. Add this line after your "to{} block".

score 1 · Answer 3 · edited Apr 19 '23 at 05:00

CSS animations require additional information outside of the animation name. A functioning CSS animation would look like this:

p {
  animation-duration: 3s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

But this is typically written in shorthand:

#main #logo {
  animation: 3s infinite linear spin;
}

@keyframes spin { 
  100% { 
    transform: rotateY(360deg); 
  } 
}

<div id="main">
  <img id="logo" src="http://placekitten.com/g/200/300"/>
</div>

Why is the logo not spinning forever?

3 Answers3