diff --git a/static/css/main.css b/static/css/main.css
index 2274af4..4a7c0f2 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -438,27 +438,68 @@ footer {
 }
 
 
-/* Short CV - Hide detailed content */
+/* CV Version Toggle Animations */
+@keyframes fadeInGrow {
+    from {
+        opacity: 0;
+        max-height: 0;
+        transform: scaleY(0.8);
+        transform-origin: top;
+    }
+    to {
+        opacity: 1;
+        max-height: 5000px;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes fadeOutShrink {
+    from {
+        opacity: 1;
+        max-height: 5000px;
+        transform: scaleY(1);
+    }
+    to {
+        opacity: 0;
+        max-height: 0;
+        transform: scaleY(0.8);
+        transform-origin: top;
+    }
+}
+
+/* Elements that appear/disappear */
+.long-only,
+.short-desc {
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Short CV - Hide detailed content with animation */
 .cv-short .long-only {
     display: none;
+    animation: fadeOutShrink 0.3s ease-in-out;
 }
 
 .cv-short .short-desc {
     display: block;
+    animation: fadeInGrow 0.3s ease-in-out;
 }
 
-/* Long CV - Hide short descriptions */
+/* Long CV - Hide short descriptions with animation */
 .cv-long .short-desc,
 .short-desc {
     display: none;
+    animation: fadeOutShrink 0.3s ease-in-out;
 }
 
 .cv-long .long-only {
     display: block;
+    animation: fadeInGrow 0.3s ease-in-out;
 }
 
 .cv-long .responsibilities {
     display: block;
+    animation: fadeInGrow 0.3s ease-in-out;
 }
 
 /* Responsive - tablet/mobile */