mui 5 sx小道具にキーフレームアニメーションを追加しますか?

0
2022.01.14

マテリアル UI バージョン 5 は、スタイルに sx-props を使用することをお勧めします。しかし、 私はkeyframes アニメーションを使用したいとき、問題に直面しています。誰もが私を助けてください-

const styles = {
    SectionHeading: {
        mb: '2rem',
        h6: {
            fontSize: '25px',
            fontWeight: 600,
            position: 'relative',
            '&:after': {
                content: '""',
                background: '#FBC57F',
                width: '45px',
                height: '45px',
                borderRadius: '50%',
                position: 'absolute',
                left: '-15px',
                zIndex: -1,
                top: '-4px'
            }
        }
    }
};

ここで 私はkeyframesに疑 似コードに &:after を使用する必要があります

回答
4
2022.01.14

あなたはそれを使用することができます。コードを次に示すだけです。

import { keyframes } from '@emotion/react';

const getAnimation = keyframes`
    0 %  { transform: translate(1px, 1px)   rotate(0deg)    },
    10%  { transform: translate(-1px, -2px) rotate(-1deg);  },
    20%  { transform: translate(-3px, 0px)  rotate(1deg);   },
    30%  { transform: translate(3px, 2px)   rotate(0deg);   },
    40%  { transform: translate(1px, -1px)  rotate(1deg);   },
    50%  { transform: translate(-1px, 2px)  rotate(-1deg);  },
    60%  { transform: translate(-3px, 1px)  rotate(0deg);   },
    70%  { transform: translate(3px, 1px)   rotate(-1deg);  },
    80%  { transform: translate(-1px, -1px) rotate(1deg);   },
    90%  { transform: translate(1px, 2px)   rotate(0deg);   },
    100% { transform: translate(1px, -2px)  rotate(-1deg);  }
`;

次に、コードにアニメーションを追加します。

h6: {
        fontSize: '25px',
        fontWeight: 600,
        position: 'relative',
        '&:after': {
            content: '""',
            background: '#FBC57F',
            width: '45px',
            height: '45px',
            borderRadius: '50%',
            position: 'absolute',
            left: '-15px',
            zIndex: -1,
            top: '-4px',
            animation: `${getAnimation} shake infinite`
        }
    }