diff --git a/docs/data/base/components/collapsible/CssAnimatedCollapsible.js b/docs/data/base/components/collapsible/CssAnimatedCollapsible.js
new file mode 100644
index 0000000000..55e13848d7
--- /dev/null
+++ b/docs/data/base/components/collapsible/CssAnimatedCollapsible.js
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Collapsible from '@base_ui/react/Collapsible';
+
+export default function CssAnimatedCollapsible() {
+  const [open, setOpen] = React.useState(true);
+  return (
+    <div className="CssAnimatedCollapsible">
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <Collapsible.Trigger className="CssAnimatedCollapsible-trigger">
+          <span className="icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 80 80"
+              focusable="false"
+            >
+              <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
+            </svg>
+          </span>
+          Show {open ? 'less' : 'more'}
+        </Collapsible.Trigger>
+        <Collapsible.Content className="CssAnimatedCollapsible-content">
+          <p>This is the collapsed content</p>
+          <p>This is the second paragraph</p>
+          <p>This is a longer sentence and also the third paragraph</p>
+        </Collapsible.Content>
+      </Collapsible.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export function Styles() {
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>{`
+    .CssAnimatedCollapsible {
+      font-family: system-ui, sans-serif;
+      line-height: 1.4;
+      width: 480px;
+    }
+
+    .CssAnimatedCollapsible h3 {
+      color: ${isDarkMode ? 'cyan' : 'blue'};
+    }
+
+    .CssAnimatedCollapsible-trigger {
+      border: 0;
+      padding: .5rem 1rem .5rem 0;
+      font: inherit;
+      background-color: transparent;
+    }
+
+    .CssAnimatedCollapsible-trigger:hover {
+      cursor: pointer;
+    }
+
+    .CssAnimatedCollapsible-trigger .icon {
+      display: inline-block;
+      font-size: 60%;
+      color: #000;
+      background-color: ${isDarkMode ? grey[50] : grey[700]};
+      padding: 0.3em 0.2em 0 0.2em;
+      border: 0;
+      border-radius: 50%;
+      line-height: 1;
+      text-align: center;
+      text-indent: 0;
+      transform: rotate(270deg);
+      margin-right: 0.6em;
+    }
+
+    .CssAnimatedCollapsible-trigger svg {
+      width: 1.25em;
+      height: 1.25em;
+      fill: ${isDarkMode ? grey[900] : grey[300]};
+      transition: transform 0.2s ease-in;
+      transform-origin: center 45%;
+    }
+
+    .CssAnimatedCollapsible-trigger[data-state="open"] svg {
+      transform: rotate(90deg);
+    }
+
+    .CssAnimatedCollapsible-content {
+      background-color: ${isDarkMode ? grey[700] : grey[300]};
+      overflow: hidden;
+    }
+
+    .CssAnimatedCollapsible-content p {
+      padding: 0 1rem;
+    }
+
+    .CssAnimatedCollapsible-content[data-state='open'] {
+      animation: slideDown 300ms ease-out;
+    }
+    .CssAnimatedCollapsible-content[data-state='closed'] {
+      animation: slideUp 300ms ease-out;
+    }
+
+    @keyframes slideDown {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--collapsible-content-height);
+      }
+    }
+
+    @keyframes slideUp {
+      from {
+        height: var(--collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
+    }
+    `}</style>
+  );
+}
diff --git a/docs/data/base/components/collapsible/CssAnimatedCollapsible.tsx b/docs/data/base/components/collapsible/CssAnimatedCollapsible.tsx
new file mode 100644
index 0000000000..55e13848d7
--- /dev/null
+++ b/docs/data/base/components/collapsible/CssAnimatedCollapsible.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Collapsible from '@base_ui/react/Collapsible';
+
+export default function CssAnimatedCollapsible() {
+  const [open, setOpen] = React.useState(true);
+  return (
+    <div className="CssAnimatedCollapsible">
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <Collapsible.Trigger className="CssAnimatedCollapsible-trigger">
+          <span className="icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 80 80"
+              focusable="false"
+            >
+              <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
+            </svg>
+          </span>
+          Show {open ? 'less' : 'more'}
+        </Collapsible.Trigger>
+        <Collapsible.Content className="CssAnimatedCollapsible-content">
+          <p>This is the collapsed content</p>
+          <p>This is the second paragraph</p>
+          <p>This is a longer sentence and also the third paragraph</p>
+        </Collapsible.Content>
+      </Collapsible.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export function Styles() {
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>{`
+    .CssAnimatedCollapsible {
+      font-family: system-ui, sans-serif;
+      line-height: 1.4;
+      width: 480px;
+    }
+
+    .CssAnimatedCollapsible h3 {
+      color: ${isDarkMode ? 'cyan' : 'blue'};
+    }
+
+    .CssAnimatedCollapsible-trigger {
+      border: 0;
+      padding: .5rem 1rem .5rem 0;
+      font: inherit;
+      background-color: transparent;
+    }
+
+    .CssAnimatedCollapsible-trigger:hover {
+      cursor: pointer;
+    }
+
+    .CssAnimatedCollapsible-trigger .icon {
+      display: inline-block;
+      font-size: 60%;
+      color: #000;
+      background-color: ${isDarkMode ? grey[50] : grey[700]};
+      padding: 0.3em 0.2em 0 0.2em;
+      border: 0;
+      border-radius: 50%;
+      line-height: 1;
+      text-align: center;
+      text-indent: 0;
+      transform: rotate(270deg);
+      margin-right: 0.6em;
+    }
+
+    .CssAnimatedCollapsible-trigger svg {
+      width: 1.25em;
+      height: 1.25em;
+      fill: ${isDarkMode ? grey[900] : grey[300]};
+      transition: transform 0.2s ease-in;
+      transform-origin: center 45%;
+    }
+
+    .CssAnimatedCollapsible-trigger[data-state="open"] svg {
+      transform: rotate(90deg);
+    }
+
+    .CssAnimatedCollapsible-content {
+      background-color: ${isDarkMode ? grey[700] : grey[300]};
+      overflow: hidden;
+    }
+
+    .CssAnimatedCollapsible-content p {
+      padding: 0 1rem;
+    }
+
+    .CssAnimatedCollapsible-content[data-state='open'] {
+      animation: slideDown 300ms ease-out;
+    }
+    .CssAnimatedCollapsible-content[data-state='closed'] {
+      animation: slideUp 300ms ease-out;
+    }
+
+    @keyframes slideDown {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--collapsible-content-height);
+      }
+    }
+
+    @keyframes slideUp {
+      from {
+        height: var(--collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
+    }
+    `}</style>
+  );
+}
diff --git a/docs/data/base/components/collapsible/UnstyledCollapsibleIntroduction.js b/docs/data/base/components/collapsible/UnstyledCollapsibleIntroduction.js
new file mode 100644
index 0000000000..f5b96f31fe
--- /dev/null
+++ b/docs/data/base/components/collapsible/UnstyledCollapsibleIntroduction.js
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { styled, useTheme, Box } from '@mui/system';
+import * as BaseCollapsible from '@base_ui/react/Collapsible';
+
+const Collapsible = BaseCollapsible.Root;
+
+const CollapsibleTrigger = styled(BaseCollapsible.Trigger)`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  gap: 4px;
+  font-size: 16px;
+
+  & svg {
+    margin-top: 1px;
+  }
+
+  &[data-state='open'] svg {
+    transform: rotate(180deg);
+  }
+`;
+
+const CollapsibleContent = styled(BaseCollapsible.Content)``;
+
+export default function UnstyledCollapsibleIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  const [open, setOpen] = React.useState(true);
+  return (
+    <Box
+      className={isDarkMode ? 'dark' : ''}
+      sx={{ width: 480, fontFamily: 'IBM Plex Sans, sans-serif' }}
+    >
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            width="16"
+            height="16"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m19.5 8.25-7.5 7.5-7.5-7.5"
+            />
+          </svg>
+          Show {open ? 'less' : 'more'}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <p>
+            This is the collapsed content. The element that shows and hides the
+            content has role button
+          </p>
+          <p>
+            When the content is visible, the element with role `button` has
+            `aria-expanded` set to `true`
+          </p>
+          <p>When the content area is hidden, it is set to `false`</p>
+          <p>
+            Optionally, the element with role `button` has a value specified for
+            `aria-controls` that refers to the element that contains all the content
+            that is shown or hidden
+          </p>
+        </CollapsibleContent>
+      </Collapsible>
+    </Box>
+  );
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
diff --git a/docs/data/base/components/collapsible/UnstyledCollapsibleIntroduction.tsx b/docs/data/base/components/collapsible/UnstyledCollapsibleIntroduction.tsx
new file mode 100644
index 0000000000..f5b96f31fe
--- /dev/null
+++ b/docs/data/base/components/collapsible/UnstyledCollapsibleIntroduction.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { styled, useTheme, Box } from '@mui/system';
+import * as BaseCollapsible from '@base_ui/react/Collapsible';
+
+const Collapsible = BaseCollapsible.Root;
+
+const CollapsibleTrigger = styled(BaseCollapsible.Trigger)`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  gap: 4px;
+  font-size: 16px;
+
+  & svg {
+    margin-top: 1px;
+  }
+
+  &[data-state='open'] svg {
+    transform: rotate(180deg);
+  }
+`;
+
+const CollapsibleContent = styled(BaseCollapsible.Content)``;
+
+export default function UnstyledCollapsibleIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  const [open, setOpen] = React.useState(true);
+  return (
+    <Box
+      className={isDarkMode ? 'dark' : ''}
+      sx={{ width: 480, fontFamily: 'IBM Plex Sans, sans-serif' }}
+    >
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            width="16"
+            height="16"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m19.5 8.25-7.5 7.5-7.5-7.5"
+            />
+          </svg>
+          Show {open ? 'less' : 'more'}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <p>
+            This is the collapsed content. The element that shows and hides the
+            content has role button
+          </p>
+          <p>
+            When the content is visible, the element with role `button` has
+            `aria-expanded` set to `true`
+          </p>
+          <p>When the content area is hidden, it is set to `false`</p>
+          <p>
+            Optionally, the element with role `button` has a value specified for
+            `aria-controls` that refers to the element that contains all the content
+            that is shown or hidden
+          </p>
+        </CollapsibleContent>
+      </Collapsible>
+    </Box>
+  );
+}
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
diff --git a/docs/data/base/components/collapsible/collapsible.md b/docs/data/base/components/collapsible/collapsible.md
index 806953818c..7d75fb25e4 100644
--- a/docs/data/base/components/collapsible/collapsible.md
+++ b/docs/data/base/components/collapsible/collapsible.md
@@ -16,6 +16,8 @@ packageName: '@base_ui/react'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+{{"demo": "UnstyledCollapsibleIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
+
 ## Installation
 
 Base UI components are all available as a single package.
@@ -54,3 +56,73 @@ import * as Collapsible from '@base_ui/react/Collapsible';
   <Collapsible.Content>This is the content</Collapsible.Content>
 </Collapsible.Root>
 ```
+
+## Animations
+
+The Collapsible component can animate when opening or closing using either:
+
+- CSS animations
+- CSS transitions
+- JavaScript animations
+
+The height of the `Content` is provided as the `--collapsible-content-height` CSS variable
+
+### CSS Animations
+
+CSS animations can be used with two declarations:
+
+```css
+.Collapsible-content {
+  overflow: hidden;
+}
+
+.Collapsible-content[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+
+.Collapsible-content[data-state='closed'] {
+  animation: slideUp 300ms ease-in;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+```
+
+{{"demo": "CssAnimatedCollapsible.js"}}
+
+### CSS Transitions
+
+```css
+.Collapsible-content {
+  overflow: hidden;
+}
+
+.Collapsible-content[data-entering] {
+  height: 0;
+}
+
+.Collapsible2-content[data-state='open'] {
+  height: var(--collapsible-content-height);
+  transition: height 300ms ease-out;
+}
+
+.Collapsible2-content[data-state='closed'] {
+  height: 0;
+  transition: height 300ms ease-in;
+}
+```
diff --git a/docs/pages/experiments/collapsible.tsx b/docs/pages/experiments/collapsible.tsx
index 173063cc72..e4c356a1ac 100644
--- a/docs/pages/experiments/collapsible.tsx
+++ b/docs/pages/experiments/collapsible.tsx
@@ -8,7 +8,7 @@ export default function CollapsibleDemo() {
       <Collapsible.Root>
         <Collapsible.Trigger className="MyCollapsible-trigger">
           <span className="icon">
-            <svg xmlns='\http://www.w3.org/2000/svg"' viewBox="0 0 80 80" focusable="false">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" focusable="false">
               <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
             </svg>
           </span>
@@ -16,6 +16,12 @@ export default function CollapsibleDemo() {
         </Collapsible.Trigger>
         <Collapsible.Content className="MyCollapsible-content">
           <p>This is the collapsed content</p>
+          <p>
+            Your Choice of Fried Chicken (Half), Chicken Sandwich, With Shredded cabbage & carrot
+            with mustard mayonnaise And Potato Wedges
+          </p>
+          <p>demo: https://codepen.io/aardrian/pen/QWjBNQG</p>
+          <p>https://adrianroselli.com/2020/05/disclosure-widgets.html</p>
         </Collapsible.Content>
       </Collapsible.Root>
       <Styles />
@@ -109,10 +115,33 @@ export function Styles() {
     }
 
     .MyCollapsible-content {
-      padding: .25em .75em;
-      border: .1em solid #ddd;
-      background-color: #fff;
-      margin-top: -.1em;
+      background-color: #eaeaea;
+      overflow: hidden;
+    }
+
+    .MyCollapsible-content[data-state='open'] {
+      animation: slideDown 600ms ease-out;
+    }
+    .MyCollapsible-content[data-state='closed'] {
+      animation: slideUp 600ms ease-out;
+    }
+
+    @keyframes slideDown {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--collapsible-content-height);
+      }
+    }
+
+    @keyframes slideUp {
+      from {
+        height: var(--collapsible-content-height);
+      }
+      to {
+        height: 0;
+      }
     }
     `}</style>
   );
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
index f8730ecbf7..749420e5a7 100644
--- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
@@ -8,12 +8,16 @@ import type { CollapsibleContextValue } from '../Root/CollapsibleRoot.types';
 const contextValue: CollapsibleContextValue = {
   contentId: 'ContentId',
   disabled: false,
+  mounted: true,
   open: true,
   setContentId() {},
+  setMounted() {},
   setOpen() {},
+  transitionStatus: undefined,
   ownerState: {
     open: true,
     disabled: false,
+    transitionStatus: undefined,
   },
 };
 
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
index bb44181404..8767763a2f 100644
--- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
@@ -13,12 +13,16 @@ const CollapsibleContent = React.forwardRef(function CollapsibleContent(
 ) {
   const { className, render, ...otherProps } = props;
 
-  const { open, contentId, setContentId, ownerState } = useCollapsibleContext();
+  const { mounted, open, contentId, setContentId, setMounted, ownerState } =
+    useCollapsibleContext();
 
-  const { getRootProps } = useCollapsibleContent({
+  const { getRootProps, height } = useCollapsibleContent({
     id: contentId,
+    mounted,
     open,
+    ref: forwardedRef,
     setContentId,
+    setMounted,
   });
 
   const { renderElement } = useComponentRenderer({
@@ -26,8 +30,12 @@ const CollapsibleContent = React.forwardRef(function CollapsibleContent(
     render: render ?? 'div',
     ownerState,
     className,
-    ref: forwardedRef,
-    extraProps: otherProps,
+    extraProps: {
+      ...otherProps,
+      style: {
+        '--collapsible-content-height': height ? `${height}px` : undefined,
+      },
+    },
     customStyleHookMapping: collapsibleStyleHookMapping,
   });
 
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
index 6c7d72beed..9137b94ac4 100644
--- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
@@ -6,15 +6,20 @@ export interface CollapsibleContentProps
 
 export interface UseCollapsibleContentParameters {
   id?: React.HTMLAttributes<Element>['id'];
+  mounted: boolean;
   /**
    * The open state of the Collapsible
    */
   open: boolean;
+  ref: React.Ref<HTMLElement>;
   setContentId: (id: string | undefined) => void;
+  setMounted: (nextMounted: boolean) => void;
 }
 
 export interface UseCollapsibleContentReturnValue {
   getRootProps: (
     externalProps?: React.ComponentPropsWithRef<'button'>,
   ) => React.ComponentPropsWithRef<'button'>;
+  isOpen: boolean;
+  height: number;
 }
diff --git a/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
index e521ca0002..c2e5d62aee 100644
--- a/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
+++ b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
@@ -1,12 +1,23 @@
 'use client';
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { mergeReactProps } from '../../utils/mergeReactProps';
+import { ownerWindow } from '../../utils/owner';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useAnimationsFinished } from '../../utils/useAnimationsFinished';
+import { useForkRef } from '../../utils/useForkRef';
 import { useId } from '../../utils/useId';
 import {
   UseCollapsibleContentParameters,
   UseCollapsibleContentReturnValue,
 } from './CollapsibleContent.types';
+
+function getComputedStyles(element: HTMLElement) {
+  const containerWindow = ownerWindow(element);
+  return containerWindow.getComputedStyle(element);
+}
+
 /**
  *
  * Demos:
@@ -20,10 +31,24 @@ import {
 function useCollapsibleContent(
   parameters: UseCollapsibleContentParameters,
 ): UseCollapsibleContentReturnValue {
-  const { id: idParam, open, setContentId } = parameters;
+  const {
+    id: idParam,
+    open,
+    mounted: contextMounted,
+    ref,
+    setContentId,
+    setMounted: setContextMounted,
+  } = parameters;
 
   const id = useId(idParam);
 
+  const contentRef = React.useRef<HTMLElement | null>(null);
+
+  const heightRef = React.useRef(0);
+  const { current: height } = heightRef;
+
+  const latestAnimationNameRef = React.useRef('none');
+
   useEnhancedEffect(() => {
     setContentId(id);
     return () => {
@@ -31,18 +56,87 @@ function useCollapsibleContent(
     };
   }, [id, setContentId]);
 
+  const handleContentRef = useEventCallback((element: HTMLElement) => {
+    if (!element) {
+      return;
+    }
+
+    contentRef.current = element;
+
+    const computedStyles = getComputedStyles(element);
+
+    latestAnimationNameRef.current = computedStyles.animationName ?? 'none';
+  });
+
+  const mergedRef = useForkRef(ref, handleContentRef);
+
+  const runOnceAnimationsFinish = useAnimationsFinished(contentRef);
+
+  const isOpen = open || contextMounted;
+
+  const isInitialOpenRef = React.useRef(isOpen);
+
+  useEnhancedEffect(() => {
+    const { current: element } = contentRef;
+
+    if (element) {
+      const computedStyles = getComputedStyles(element);
+
+      const prevAnimationName = latestAnimationNameRef.current;
+      const currentAnimationName = computedStyles.animationName;
+
+      const originalAnimationName =
+        element.style.animationName === 'none' ? '' : element.style.animationName;
+
+      element.style.animationName = 'none';
+
+      const isAnimatingOut = prevAnimationName !== currentAnimationName && !open && contextMounted;
+
+      if (open || isAnimatingOut) {
+        const rect = element.getBoundingClientRect();
+        heightRef.current = rect.height;
+      }
+
+      element.style.animationName = isInitialOpenRef.current ? 'none' : originalAnimationName;
+
+      runOnceAnimationsFinish(() => {
+        ReactDOM.flushSync(() => {
+          setContextMounted(open);
+        });
+      });
+
+      if (currentAnimationName !== 'none') {
+        latestAnimationNameRef.current = currentAnimationName;
+      }
+    }
+  }, [open, contextMounted, runOnceAnimationsFinish, setContextMounted]);
+
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      isInitialOpenRef.current = false;
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   const getRootProps: UseCollapsibleContentReturnValue['getRootProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps(externalProps, {
         id,
-        hidden: open ? undefined : 'hidden',
+        hidden: isOpen ? undefined : 'hidden',
+        ref: mergedRef,
       }),
-    [id, open],
+    [id, isOpen, mergedRef],
   );
 
-  return {
-    getRootProps,
-  };
+  return React.useMemo(
+    () => ({
+      getRootProps,
+      isOpen,
+      height,
+    }),
+    [getRootProps, isOpen, height],
+  );
 }
 
 export { useCollapsibleContent };
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
index 88cf7143ce..cc9aac6d93 100644
--- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
@@ -45,11 +45,16 @@ describe('<Collapsible.Root />', () => {
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(content).to.not.have.attribute('hidden');
       expect(content).to.have.attribute('data-state', 'open');
+
+      setProps({ open: false });
+
+      expect(trigger).to.have.attribute('aria-expanded', 'false');
+      expect(content).to.have.attribute('data-state', 'closed');
     });
 
     it('uncontrolled mode', async () => {
       const { getByTestId, getByRole, user } = await render(
-        <Collapsible.Root>
+        <Collapsible.Root defaultOpen={false}>
           <Collapsible.Trigger />
           <Collapsible.Content data-testid="content" />
         </Collapsible.Root>,
@@ -58,6 +63,12 @@ describe('<Collapsible.Root />', () => {
       const trigger = getByRole('button');
       const content = getByTestId('content');
 
+      expect(trigger).to.have.attribute('aria-expanded', 'false');
+      expect(content).to.have.attribute('hidden');
+      expect(content).to.have.attribute('data-state', 'closed');
+
+      await user.pointer({ keys: '[MouseLeft]', target: trigger });
+
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(content).to.not.have.attribute('hidden');
       expect(content).to.have.attribute('data-state', 'open');
@@ -65,16 +76,15 @@ describe('<Collapsible.Root />', () => {
       await user.pointer({ keys: '[MouseLeft]', target: trigger });
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
-      expect(content).to.have.attribute('hidden');
       expect(content).to.have.attribute('data-state', 'closed');
     });
   });
 
   describe('keyboard interactions', () => {
-    ['Enter'].forEach((key) => {
+    ['Enter', 'Space'].forEach((key) => {
       it(`key: ${key} should toggle the Collapsible`, async () => {
         const { getByTestId, getByRole, user } = await render(
-          <Collapsible.Root>
+          <Collapsible.Root defaultOpen={false}>
             <Collapsible.Trigger>Trigger</Collapsible.Trigger>
             <Collapsible.Content data-testid="content" />
           </Collapsible.Root>,
@@ -83,16 +93,21 @@ describe('<Collapsible.Root />', () => {
         const trigger = getByRole('button');
         const content = getByTestId('content');
 
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(content).to.have.attribute('hidden');
+        expect(content).to.have.attribute('data-state', 'closed');
+
+        await user.keyboard('[Tab]');
+        expect(trigger).toHaveFocus();
+        await user.keyboard(`[${key}]`);
+
         expect(trigger).to.have.attribute('aria-expanded', 'true');
         expect(content).to.not.have.attribute('hidden');
         expect(content).to.have.attribute('data-state', 'open');
 
-        await user.keyboard('[Tab]');
-        expect(trigger).toHaveFocus();
         await user.keyboard(`[${key}]`);
 
         expect(trigger).to.have.attribute('aria-expanded', 'false');
-        expect(content).to.have.attribute('hidden');
         expect(content).to.have.attribute('data-state', 'closed');
       });
     });
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
index 3a4320c792..5c83b184b3 100644
--- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
@@ -18,7 +18,11 @@ function CollapsibleRoot(props: CollapsibleRootProps) {
   const contextValue: CollapsibleContextValue = React.useMemo(
     () => ({
       ...collapsible,
-      ownerState: { open: collapsible.open, disabled: collapsible.disabled },
+      ownerState: {
+        open: collapsible.open,
+        disabled: collapsible.disabled,
+        transitionStatus: collapsible.transitionStatus,
+      },
     }),
     [collapsible],
   );
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
index 1e56238880..69bfae7985 100644
--- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
@@ -1,8 +1,13 @@
+import { TransitionStatus } from '../../utils/useTransitionStatus';
+
 export interface CollapsibleContextValue extends UseCollapsibleRootReturnValue {
-  ownerState: Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled'>;
+  ownerState: Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled' | 'transitionStatus'>;
 }
 
-export type CollapsibleRootOwnerState = Pick<CollapsibleContextValue, 'open' | 'disabled'>;
+export type CollapsibleRootOwnerState = Pick<
+  CollapsibleContextValue,
+  'open' | 'disabled' | 'transitionStatus'
+>;
 
 export interface CollapsibleRootProps extends UseCollapsibleRootParameters {
   children: React.ReactNode;
@@ -37,10 +42,13 @@ export interface UseCollapsibleRootReturnValue {
    * The disabled state of the Collapsible
    */
   disabled: boolean;
+  mounted: boolean;
   /**
    * The open state of the Collapsible
    */
   open: boolean;
   setContentId: (id: string | undefined) => void;
+  setMounted: (open: boolean) => void;
   setOpen: (open: boolean) => void;
+  transitionStatus: TransitionStatus;
 }
diff --git a/packages/mui-base/src/Collapsible/Root/styleHooks.ts b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
index 29af054402..45891e16b8 100644
--- a/packages/mui-base/src/Collapsible/Root/styleHooks.ts
+++ b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
@@ -5,4 +5,13 @@ export const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRoot
   open: (value) => {
     return value ? { 'data-state': 'open' } : { 'data-state': 'closed' };
   },
+  transitionStatus: (value) => {
+    if (value === 'entering') {
+      return { 'data-entering': '' } as Record<string, string>;
+    }
+    if (value === 'exiting') {
+      return { 'data-exiting': '' };
+    }
+    return null;
+  },
 };
diff --git a/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts b/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
index bf6767fd3d..79213fff0e 100644
--- a/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
+++ b/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
@@ -1,6 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useControlled } from '../../utils/useControlled';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useTransitionStatus } from '../../utils/useTransitionStatus';
 import { useId } from '../../utils/useId';
 import {
   UseCollapsibleRootParameters,
@@ -21,27 +23,35 @@ function useCollapsibleRoot(
 ): UseCollapsibleRootReturnValue {
   const { open: openParam, defaultOpen = true, onOpenChange, disabled = false } = parameters;
 
-  const [open, setOpen] = useControlled({
+  const [open, setOpenState] = useControlled({
     controlled: openParam,
     default: defaultOpen,
-    name: 'CollapsibleRoot',
+    name: 'Collapsible',
+    state: 'open',
   });
 
+  const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true); // TODO: the 2nd argument should be an `animated` prop?
+
   const [contentId, setContentId] = React.useState<string | undefined>(useId());
 
-  React.useEffect(() => {
-    if (onOpenChange) {
-      onOpenChange(open);
-    }
-  }, [onOpenChange, open]);
+  const setOpen = useEventCallback((nextOpen: boolean) => {
+    onOpenChange?.(nextOpen);
+    setOpenState(nextOpen);
+  });
 
-  return {
-    contentId,
-    disabled,
-    open,
-    setContentId,
-    setOpen,
-  };
+  return React.useMemo(
+    () => ({
+      contentId,
+      disabled,
+      mounted,
+      open,
+      setContentId,
+      setMounted,
+      setOpen,
+      transitionStatus,
+    }),
+    [contentId, disabled, mounted, open, setContentId, setMounted, setOpen, transitionStatus],
+  );
 }
 
 export { useCollapsibleRoot };
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
index f722bcae1a..a206fdbbd7 100644
--- a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -8,12 +8,16 @@ import type { CollapsibleContextValue } from '../Root/CollapsibleRoot.types';
 const contextValue: CollapsibleContextValue = {
   contentId: 'ContentId',
   disabled: false,
+  mounted: true,
   open: true,
   setContentId() {},
+  setMounted() {},
   setOpen() {},
+  transitionStatus: undefined,
   ownerState: {
     open: true,
     disabled: false,
+    transitionStatus: undefined,
   },
 };