I have this Button from MUIv5 and I would like to fully animate it once it's pressed.

The problem is I have to hold the button to make the full animation and not just one simple click

How can I fix it? Thanks in advance.

Here's the code.

import Button from "@mui/material/Button";

export default function App() {
  const buttonJSS = {
    ":active": {
      animation: "MoveUpDown 0.3s linear",
      animationFillMode: "forwards"
    },

    "@keyframes MoveUpDown": {
      "0%, 100%": {
        transform: "translateY(0)"
      },
      "50%": {
        transform: "translateY(20px)"
      }
    }
  };

  return (
    <div className="App">
      <Button sx={buttonJSS}>MY BUTTON</Button>
    </div>
  );
}

The link of the codesandbox is here: