Adding keyframes animation in mui 5 sx props?

You can use it. Just try following code-

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);  }
`;

Then add animation to your code-

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`
        }
    }