diff --git a/packages/website/src/content/components/accordion.mdx b/packages/website/src/content/components/accordion.mdx
index c0ef3af745..96b51860f0 100644
--- a/packages/website/src/content/components/accordion.mdx
+++ b/packages/website/src/content/components/accordion.mdx
@@ -41,6 +41,30 @@ Understanding the Accordion's anatomy is crucial for proper setup:
 
 <Anatomy id="accordion" />
 
+## Animation
+
+You can use CSS animations to create smooth transitions for opening and closing Accordion items. Utilize the `data-state` attribute in combination with the `--height` CSS variable to animate the open and closed states of `Accordion.ItemContent`.
+
+```css
+@keyframes slideDown {
+  from { height: 0; }
+  to { height: var(--height); }
+}
+
+@keyframes slideUp {
+  from { height: var(--height); }
+  to { height: 0; }
+}
+
+[data-scope='accordion'][data-part='item-content'][data-state='open'] {
+  animation: slideDown 250ms;
+}
+
+[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
+  animation: slideUp 200ms;
+}
+```
+
 ## Examples
 
 ### Collapsible Panels