patternfly · jcmill · Sep 14, 2026 · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026
diff --git a/src/patternfly/components/Backdrop/backdrop.hbs b/src/patternfly/components/Backdrop/backdrop.hbs
@@ -1,6 +1,13 @@
-<div class="{{pfv}}backdrop{{#if backdrop--modifier}} {{backdrop--modifier}}{{/if}}"
+<div class="{{pfv}}backdrop
+  {{setModifiers
+    backdrop--IsAnimate='pf-m-animate'
+    backdrop--IsShow='pf-m-show'
+    backdrop--modifier=backdrop--modifier
+  }}"
   {{#if backdrop--attribute}}
     {{{backdrop--attribute}}}
   {{/if}}>
-  {{> @partial-block}}
+  {{#if @partial-block}}
+    {{> @partial-block}}
+  {{/if}}
 </div>
diff --git a/src/patternfly/components/Backdrop/backdrop.scss b/src/patternfly/components/Backdrop/backdrop.scss
@@ -4,6 +4,15 @@
   --#{$backdrop}--Position: fixed;
   --#{$backdrop}--ZIndex: var(--pf-t--global--z-index--lg);
   --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+
+  // Animate top
+  --#{$backdrop}--m-animate--Opacity: 0;
+  --#{$backdrop}--m-animate--TransitionProperty: opacity, visibility;
+  --#{$backdrop}--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$backdrop}--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --#{$backdrop}--m-animate--m-show--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
+  --#{$backdrop}--m-animate--m-show--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$backdrop}--m-animate--m-show--Opacity: 1;
 }
 
 .#{$backdrop} {
@@ -14,6 +23,37 @@
   width: 100%;
   height: 100%;
   background-color: var(--#{$backdrop}--BackgroundColor);
+
+  &.pf-m-animate {
+    visibility: hidden;
+    background-color: transparent;
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      content: "";
+      background-color: var(--#{$backdrop}--BackgroundColor);
+      opacity: var(--#{$backdrop}--m-animate--Opacity);
+      transition-timing-function: var(--#{$backdrop}--m-animate--TransitionTimingFunction);
+      transition-duration: var(--#{$backdrop}--m-animate--TransitionDuration);
+      transition-property: var(--#{$backdrop}--m-animate--TransitionProperty, none);
+    }
+  }
+
+  &.pf-m-show {
+    --#{$backdrop}--m-animate--TransitionDuration: var(--#{$backdrop}--m-animate--m-show--TransitionDuration);
+    --#{$backdrop}--m-animate--TransitionTimingFunction: var(--#{$backdrop}--m-animate--m-show--TransitionTimingFunction);
+
+    visibility: visible;
+
+    &::before {
+      opacity: var(--#{$backdrop}--m-animate--m-show--Opacity);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
 }
 
 .#{$backdrop}__open {

diff --git a/src/patternfly/components/Backdrop/examples/Backdrop.md b/src/patternfly/components/Backdrop/examples/Backdrop.md
@@ -7,8 +7,14 @@ cssPrefix: pf-v6-c-backdrop
 ## Examples
 ### Basic
 ```hbs isFullscreen
-{{#> backdrop}}
-{{/backdrop}}
+{{> backdrop}}
+```
+
+### Animated
+Toggle the `.pf-m-show` class to see the show and hide animation.
+
+```hbs isFullscreen isBeta
+{{> backdrop backdrop--IsAnimate=true backdrop--IsShow=true}}
 ```
 
 ## Documentation
@@ -20,3 +26,5 @@ This component puts a backdrop over the entire viewport.
 | -- | -- | -- |
 | `.pf-v6-c-backdrop` | `<div>` |  Initiates backdrop. **Required** |
 | `.pf-v6-c-backdrop__open` | `<body>` |  Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |
+| `.pf-m-animate` | `.pf-v6-c-backdrop` | Enables animation support for fading the backdrop in and out. |
+| `.pf-m-show` | `.pf-v6-c-backdrop.pf-m-animate` | Used to show/hide the backdrop when using `.pf-m-animate`. |
diff --git a/src/patternfly/components/ModalBox/examples/ModalBox.md b/src/patternfly/components/ModalBox/examples/ModalBox.md
@@ -308,6 +308,26 @@ The status modifier classes can be applied directly to the modal title element,
 {{/modal-example}}
 ```
 
+### Animated
+Toggle the `.pf-m-open` class to see the entry and exit animation.
+
+```hbs isFullscreen isBeta
+{{#> modal-box modal-box--attribute='aria-labelledby="animated-modal-title" aria-describedby="animated-modal-description"' modal-box--IsAnimate=true modal-box--IsOpen=true}}
+  {{> modal-box-close}}
+  {{#> modal-box-header}}
+    {{#> modal-box-title modal-box-title--attribute='id="animated-modal-title"'}}
+      Modal title
+    {{/modal-box-title}}
+  {{/modal-box-header}}
+  {{#> modal-box-body modal-box-body--attribute='id="animated-modal-description"'}}
+    To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
+  {{/modal-box-body}}
+  {{#> modal-box-footer}}
+    Modal footer
+  {{/modal-box-footer}}
+{{/modal-box}}
+```
+
 ## Documentation
 ### Overview
 A modal box is a generic rectangular container that can be used to build modals. A modal box can have the following sections: header, title, description, body, and footer. With normal use of the modal, a title or body is required. Alternatively, no child elements can be used, and the `.pf-v6-c-modal-box` container will  serve as a generic container with no padding for custom modal content. If no `.pf-v6-c-modal-box__title` is used, `aria-label="[title of modal]"` must be provided for `.pf-v6-c-modal-box`.
@@ -345,6 +365,8 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `.pf-m-md` | `.pf-v6-c-modal-box` | Modifies for a medium modal box width. |
 | `.pf-m-lg` | `.pf-v6-c-modal-box` | Modifies for a large modal box width. |
 | `.pf-m-align-top` | `.pf-v6-c-modal-box` | Modifies for top alignment.  |
+| `.pf-m-animate` | `.pf-v6-c-modal-box` | Enables animation support for opening/closing the modal. |
+| `.pf-m-open` | `.pf-v6-c-modal-box.pf-m-animate` | Used to open/close the modal when using `.pf-m-animate`. |
 | `.pf-m-icon` | `.pf-v6-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
 | `.pf-m-custom` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the custom alert state. |
 | `.pf-m-info` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the info alert state. |

diff --git a/src/patternfly/components/ModalBox/modal-box.hbs b/src/patternfly/components/ModalBox/modal-box.hbs
@@ -2,7 +2,11 @@
   {{#unless modal-box--HasStatusTitle}}
     {{> modal-box--status-modifiers}}
   {{/unless}}
-  {{#if modal-box--modifier}} {{modal-box--modifier}}{{/if}}"
+  {{setModifiers
+    modal-box--IsAnimate='pf-m-animate'
+    modal-box--IsOpen='pf-m-open'
+    modal-box--modifier=modal-box--modifier
+  }}"
   role="dialog"
   aria-modal="true"
   {{#if modal-box--attribute}}

diff --git a/src/patternfly/components/ModalBox/modal-box.scss b/src/patternfly/components/ModalBox/modal-box.scss
@@ -77,6 +77,18 @@
   // Footer buttons
   --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
+
+  // Animate
+  --#{$modal-box}--m-animate--TransitionProperty: opacity, visibility;
+  --#{$modal-box}--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$modal-box}--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --#{$modal-box}--m-animate--m-open--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$modal-box}--m-animate--m-open--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$modal-box}--m-animate--TransitionProperty: opacity, translate, visibility;
+    --#{$modal-box}--m-animate--m-open--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--fade--default), 0s;
+  }
 }
 
 .#{$modal-box} {
@@ -112,6 +124,37 @@
     max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
   }
 
+  &.pf-m-animate {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      translate: 0 #{pf-size-prem(24px)};
+    }
+
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transition-timing-function: var(--#{$modal-box}--m-animate--TransitionTimingFunction);
+    transition-duration: var(--#{$modal-box}--m-animate--TransitionDuration);
+    transition-property: var(--#{$modal-box}--m-animate--TransitionProperty, none);
+  }
+
+  &.pf-m-open {
+    --#{$modal-box}--m-animate--TransitionDuration: var(--#{$modal-box}--m-animate--m-open--TransitionDuration);
+    --#{$modal-box}--m-animate--TransitionTimingFunction: var(--#{$modal-box}--m-animate--m-open--TransitionTimingFunction);
+
+    visibility: visible;
+    pointer-events: revert;
+    opacity: 1;
+    translate: 0;
+
+    @starting-style {
+      @media screen and (prefers-reduced-motion: no-preference) {
+        translate: 0 #{pf-size-prem(24px)};
+      }
+
+      opacity: 0;
+    }
+  }
+
   @at-root .#{$modal-box}__title,
   & {
     &.pf-m-danger {

diff --git a/src/patternfly/demos/Backdrop/examples/Backdrop.md b/src/patternfly/demos/Backdrop/examples/Backdrop.md
@@ -0,0 +1,19 @@
+---
+id: Backdrop
+section: components
+---
+
+## Examples
+### Basic
+```hbs isFullscreen
+{{> page-template page-template--id="page-demo-backdrop"}}
+{{> backdrop}}
+```
+
+### Animated
+Toggle the `.pf-m-show` class to see the show and hide animation.
+
+```hbs isFullscreen isBeta
+{{> page-template page-template--id="page-demo-backdrop-animated"}}
+{{> backdrop backdrop--IsAnimate=true backdrop--IsShow=true}}
+```