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.
3
Answers
You’ll need to provide it the count like the following snippet:
CSS animations require additional information outside of the animation name. A functioning CSS animation would look like this:
But this is typically written in shorthand:
you need to specify that for how long you want to make the logo animate.
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".