Create bouncing recording sign with Material UI in React

I am trying to create a bouncing recording sign when an audio recording is active in React with Material UI. I can make it grow with the hover transition, but I couldn't manage to make it constantly bouncing from fontSize 20 to 30. Does someone know a sweet solution for that problem? Thanks a lot in advance!

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';

const useStyles = makeStyles(() => ({
    root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        backgroundSize: 'cover',
    },
    recording: {
        color: 'red',
        fontSize: 20,
        transition: '300ms ease',
        '&:active': {
            fontSize: 30
        }
    }

}))


export default function AudioRecorder() {
    var classes = useStyles();
    return (
        <div className={classes.root}>
                <FiberManualRecordIcon 
                className={classes.recording}></FiberManualRecordIcon>
        </div>
    )
}