diff --git a/packages/ui/src/components/message-nav.css b/packages/ui/src/components/message-nav.css
index 465bd66fe5b1..ebd8dc47a479 100644
--- a/packages/ui/src/components/message-nav.css
+++ b/packages/ui/src/components/message-nav.css
@@ -93,6 +93,14 @@
 
 [data-slot="message-nav-tooltip"] {
   z-index: 1000;
+
+  &[data-expanded] {
+    animation: slideInLeft 0.15s ease-out;
+  }
+
+  &[data-closed] {
+    animation: slideOutLeft 0.1s ease-in forwards;
+  }
 }
 
 [data-slot="message-nav-tooltip-content"] {
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index b087b59e17d6..5308cc35d251 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -113,7 +113,7 @@
 
 [data-component="reasoning-part"] {
   width: 100%;
-  opacity: 0.5;
+  animation: fadeUpDim 0.5s ease-out forwards;
 
   [data-component="markdown"] {
     margin-top: 24px;
@@ -320,6 +320,7 @@
     align-items: center;
     gap: 8px;
     color: var(--text-weak);
+    animation: slideInLeft 0.3s ease-out;
 
     [data-slot="icon-svg"] {
       flex-shrink: 0;
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index abed69897456..237906197a6d 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -6,6 +6,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
+  animation: fadeUp 0.5s ease-out;
 
   [data-slot="session-turn-content"] {
     flex-grow: 1;
@@ -126,6 +127,7 @@
     gap: 24px;
     align-items: flex-start;
     align-self: stretch;
+    animation: fadeUp 0.5s ease-out;
   }
 
   [data-slot="session-turn-summary-header"] {
diff --git a/packages/ui/src/styles/animations.css b/packages/ui/src/styles/animations.css
index 3480976ddc21..948974adca69 100644
--- a/packages/ui/src/styles/animations.css
+++ b/packages/ui/src/styles/animations.css
@@ -33,6 +33,39 @@
   }
 }
 
+@keyframes fadeUpDim {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 0.5;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
 .fade-up-text {
   animation: fadeUp 0.4s ease-out forwards;
   opacity: 0;
@@ -128,3 +161,13 @@
     animation-delay: 3s;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}