如何使用MUI v5（情感）实现CSS关键帧？

Question

我正在尝试在我的 React 应用程序中使用关键帧实现一些旋转文本（如轮播）。我正在使用 MUI v5 和

@emotion

基本上，我希望我的“盒子”每 x 秒显示不同的单词并带有“旋转”动画。下面是我的旋转动画关键帧代码：

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 
    `

以下是我返回的组件：

return (<>
        ...
        <div css={animated}>
            <div>restaurants</div>
            <div>musuems</div>
            <div>landmarks</div>
            <div>parks</div>
        </div>
        ...
</>)

最终，我想用 MUI 中的

Box

和

Typography

组件替换我的 div。我之前从未实现过关键帧，更不用说将其与 MUI 一起使用了。非常感谢任何帮助:)

Answer 1

使用 emotion/styled

尝试此代码

import styled from "@emotion/styled";
import { 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 StyledDiv = styled.div`animation: ${spin} 7s ease-in-out infinite`; 
 return (<>
        ...
        <StyledDiv>
            <div>restaurants</div>
            <div>musuems</div>
            <div>landmarks</div>
            <div>parks</div>
        </StyledDiv>
        ...
</>)