Hey there! I'm currently working on adding some spinning text, similar to a carousel, using keyframes in my React app. The setup involves MUI v5 with @emotion. Basically, I want a "box" element to show different words every few seconds with a rotating animation effect. Check out the code snippet below for the keyframes of my spin animation:
import { css, keyframes } from '@emotion/react';
export const Home = () => {
const spin = keyframes`
0%, 20%:{
transform: translateY(0)
},
25%, 45%:{
transform: translateY(-208px)
},
50%, 70%:{
transform: translateY(-416px)
},
75%, 95%:{
transform: translateY(-624px)
},
100%:{
transform: translateY(-832px)
}
`;
const animated = css`
animation: ${spin} 7s ease-in-out infinite;
`
Here's what the components look like once returned:
return (<>
...
<div css={animated}>
<div>restaurants</div>
<div>musuems</div>
<div>landmarks</div>
<div>parks</div>
</div>
...
</>)
My goal is to eventually swap out the div elements with MUI's Box and Typography components. This is my first time working with keyframes, especially when it comes to integrating them with MUI. Any guidance or tips would be highly appreciated :)