diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index f5c2cba8ef99..e2e1d3531152 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -76,6 +76,16 @@ $accordion-tokens: defaults(
     background-color: var(--accordion-bg);
     border: var(--accordion-border-width) solid var(--accordion-border-color);
 
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      overflow-y: clip;
+      @include transition(content-visibility .2s allow-discrete, block-size .2s);
+    }
+
     &:first-of-type {
       @include border-top-radius(var(--accordion-border-radius));
 
@@ -103,7 +113,11 @@ $accordion-tokens: defaults(
 
     // Open state - details[open] applies these styles
     &[open] {
+
       border-color: var(--theme-border, var(--accordion-border-color));
+      &::details-content {
+        block-size: auto;
+      }
 
       > .accordion-header {
         color: var(--theme-text, var(--accordion-active-color));