diff --git a/packages/react-core/src/components/Backdrop/Backdrop.tsx b/packages/react-core/src/components/Backdrop/Backdrop.tsx
index 3dea142179b..8d38edea35e 100644
--- a/packages/react-core/src/components/Backdrop/Backdrop.tsx
+++ b/packages/react-core/src/components/Backdrop/Backdrop.tsx
@@ -1,6 +1,5 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
-import stylesAnimated from '@patternfly/react-styles/css/components/BackdropAnimations/backdrop-animations';
 import { useHasAnimations } from '../../helpers';
 
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
@@ -28,9 +27,8 @@ export const Backdrop: React.FunctionComponent<BackdropProps> = ({
       {...props}
       className={css(
         styles.backdrop,
-        hasAnimations && stylesAnimated.backdropAnimated,
-        hasAnimations && isVisible === true && stylesAnimated.backdropAnimatedVisible,
-        hasAnimations && isVisible !== true && stylesAnimated.backdropAnimatedHidden,
+        hasAnimations && styles.modifiers.animate,
+        hasAnimations && isVisible === true && styles.modifiers.show,
         className
       )}
     >
diff --git a/packages/react-core/src/components/Modal/ModalBox.tsx b/packages/react-core/src/components/Modal/ModalBox.tsx
index 17d8a0b3a8d..93c65932af1 100644
--- a/packages/react-core/src/components/Modal/ModalBox.tsx
+++ b/packages/react-core/src/components/Modal/ModalBox.tsx
@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
-import stylesAnimated from '@patternfly/react-styles/css/components/ModalAnimations/modal-animations';
+// import stylesAnimated from '@patternfly/react-styles/css/components/ModalAnimations/modal-animations';
 import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
 
 export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
@@ -53,9 +53,8 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
       aria-modal="true"
       className={css(
         styles.modalBox,
-        hasAnimations && stylesAnimated.modalAnimated,
-        hasAnimations && isOpen === true && stylesAnimated.modalAnimatedOpen,
-        hasAnimations && isOpen !== true && stylesAnimated.modalAnimatedClosed,
+        hasAnimations && styles.modifiers.animate,
+        hasAnimations && isOpen === true && styles.modifiers.open,
         className,
         position === 'top' && styles.modifiers.alignTop,
         variant === 'large' && styles.modifiers.lg,
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
index 499959b4ab9..bf38aa0dc0f 100644
--- a/packages/react-core/src/components/Modal/ModalContent.tsx
+++ b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { FocusTrap } from '../../helpers';
 import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
@@ -78,8 +79,20 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ...props
 }: ModalContentProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
+  // Keeps the modal in the DOM while the close animation runs. When animations are enabled we defer
+  // unmounting until the backdrop's transition ends (see onTransitionEnd below) instead of removing
+  // it immediately when isOpen becomes false.
+  const [isRendered, setIsRendered] = useState(isOpen);
 
-  if (!isOpen && !hasAnimations) {
+  useEffect(() => {
+    if (isOpen) {
+      setIsRendered(true);
+    } else if (!hasAnimations) {
+      setIsRendered(false);
+    }
+  }, [isOpen, hasAnimations]);
+
+  if (!isRendered) {
     return null;
   }
 
@@ -126,7 +139,23 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   }
 
   return (
-    <Backdrop className={css(backdropClassName)} id={backdropId} hasAnimations={hasAnimations} isVisible={isOpen}>
+    <Backdrop
+      className={css(backdropClassName)}
+      id={backdropId}
+      hasAnimations={hasAnimations}
+      isVisible={isOpen}
+      onTransitionEnd={
+        hasAnimations
+          ? (event) => {
+              // Only unmount once the backdrop's own closing transition finishes. Guarding on the
+              // target prevents bubbled transitions from child elements from triggering this early.
+              if (!isOpen && event.target === event.currentTarget) {
+                setIsRendered(false);
+              }
+            }
+          : undefined
+      }
+    >
       <FocusTrap
         active={focusTrapActive}
         focusTrapOptions={{
diff --git a/packages/react-core/src/components/Modal/examples/Modal.css b/packages/react-core/src/components/Modal/examples/Modal.css
deleted file mode 100644
index 48d000ae169..00000000000
--- a/packages/react-core/src/components/Modal/examples/Modal.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Modal.css
- *
- * To fix an issue with the PR preview deployment,
- * this file contains the contents of the new modal-animations.css + backdrop-animations.css
- */
-
-
-/* --- modal-animations.css ------ */
-
-.pf-v6-c-modal-animated {
-    --pf-v6-c-modal-animated--Transition:
-        opacity 240ms cubic-bezier(0.4, 0.14, 1, 1),
-        transform 240ms cubic-bezier(0.4, 0.14, 1, 1),
-        visibility 0ms linear 240ms;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transform: translate3d(0, -24px, 0);
-    transform-origin: top center;
-    transition: var(--pf-v6-c-modal-animated--Transition);
-}
-
-.pf-v6-c-modal-animated-open {
-    --pf-v6-c-modal-animated--Transition:
-        transform 240ms cubic-bezier(0, 0, 0.2, 1),
-        visibility 0ms linear 0ms;
-    opacity: 1;
-    visibility: visible;
-    pointer-events: unset;
-    transform: translate3d(0, 0, 0);
-}
-
-.pf-v6-c-modal-animated-closed {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    transform: translate3d(0, -24px, 0);
-}
-
-@media screen and (prefers-reduced-motion: reduce) {
-    .pf-v6-c-modal-animated,
-    .pf-v6-c-modal-animated-open,
-    .pf-v6-c-modal-animated-closed {
-        transition: none;
-    }
-}
-
-/* --- backdrop-animations.css --- */
-
-.pf-v6-c-backdrop-animated {
-    background-color: transparent;
-    visibility: hidden;
-    pointer-events: none;
-    transition:
-    background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), /* Carbon equivalent: duration-moderate-02 + motion(exit, expressive) */
-    visibility 0ms linear 240ms; /* Carbon equivalent: duration-moderate-02 */
-}
-
-.pf-v6-c-backdrop-animated-visible {
-    background-color: var(--pf-v6-c-backdrop--BackgroundColor);
-    visibility: visible;
-    pointer-events: unset;
-    transition:
-    background-color 240ms cubic-bezier(0, 0, 0.2, 1),
-    visibility 0ms linear 0ms;
-}
-
-.pf-v6-c-backdrop-animated-hidden {
-    background-color: transparent;
-    visibility: hidden;
-    pointer-events: none;
-}
-
-@media screen and (prefers-reduced-motion: reduce) {
-    .pf-v6-c-backdrop-animated,
-    .pf-v6-c-backdrop-animated-visible,
-    .pf-v6-c-backdrop-animated-hidden {
-        transition: none;
-    }
-}
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index e8ffe61e9e9..804d5428d0e 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -11,7 +11,6 @@ import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warnin
 import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
-import './Modal.css';
 
 ## Examples