Jak dodać animacje do okna modalnego?

Hej, chcialbym zeby mój modal mial ciekawa animacje gdy sie pojawia. Tak wyglada moj modal:

import { useState } from "react";

import { MouseEvent, useEffect, useRef } from "react";

export const DialogModalTester = () => {
	const [isOpened, setIsOpened] = useState(false);

	const onProceed = () => {
		console.log("Proceed clicked");
	};

	return (
		<div>
			<button onClick={() => setIsOpened(true)}>Open "dialog" modal</button>

			<DialogModal
				title="Dialog modal example"
				isOpened={isOpened}
				onProceed={onProceed}
				onClose={() => setIsOpened(false)}
			>
				<p>To close: click Close, press Escape, or click outside.</p>
			</DialogModal>
		</div>
	);
};

const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => {
	const r = element.getBoundingClientRect();

	return (
		e.clientX > r.left &&
		e.clientX < r.right &&
		e.clientY > r.top &&
		e.clientY < r.bottom
	);
};

type Props = {
	title: string;
	isOpened: boolean;
	onProceed: () => void;
	onClose: () => void;
	children: React.ReactNode;
};

const DialogModal = ({
	title,
	isOpened,
	onProceed,
	onClose,
	children,
}: Props) => {
	const ref = useRef<HTMLDialogElement>(null);

	useEffect(() => {
		if (isOpened) {
			ref.current?.showModal();
			document.body.classList.add("modal-open"); // prevent bg scroll
		} else {
			ref.current?.close();
			document.body.classList.remove("modal-open");
		}
	}, [isOpened]);

	const proceedAndClose = () => {
		onProceed();
		onClose();
	};

	return (
		<div className="modal-overlay">
			<dialog
				className="modal-dialog"
				ref={ref}
				onCancel={onClose}
				onClick={(e) =>
					ref.current && !isClickInsideRectangle(e, ref.current) && onClose()
				}
			>
				<h3>{title}</h3>

				{children}

				<div className="buttons">
					<button onClick={proceedAndClose}>Proceed</button>
					<button onClick={onClose}>Close</button>
				</div>
			</dialog>
		</div>
	);
};

export default DialogModal;

A tak wyglada moj kod CSS

.modal-overlay {
}

.modal-dialog {
	--te-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);

	width: 400px;
	border-radius: 8px;
	border: 1px solid #888;

	opacity: 1;
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s,
		visibility 0s 0s, transform 100ms var(--te-smooth) 10ms,
		transform 100ms var(--te-smooth) 10ms;
	visibility: visible;
	z-index: 9000;

	&::backdrop {
		--_mo-bg: hsla(210, 8%, 5%, 0.5);
		background: var(--_mo-bg) !important;
	}

	.buttons {
		display: flex;
		gap: 20px;
	}
}

body.modal-open {
	overflow: hidden; /* see "modal-open" in Modal.tsx */
}

Moim celem jest imitacja zachowania z tego modalu https://stackoverflow.design/product/components/modals/ ale nie wiem jak to zrobic. Przekopiowalem

opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s,
    visibility 0s 0s, transform 100ms var(--te-smooth) 10ms,
    transform 100ms var(--te-smooth) 10ms;
visibility: visible;
z-index: 9000;

Do mojego elementu modal-dialog ale nie dziala. Co powinienem zrobic?