Question 45728 in CSS Question posted in
Some basic documentation can be found here.

Why is the logo not spinning forever? – CSS

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.

Tags:

3

Answers


  1. 0

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

    #logo {
  animation: spin 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search