diff --git a/auto-image-styles.css b/auto-image-styles.css
index 25897fb..424fe49 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -843,7 +843,33 @@
   box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 32px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
   backdrop-filter: blur(10px);
   overflow: hidden;
-  animation: 0.4s ease-out 0s 1 normal none running slideIn;
+}
+
+#wplace-settings-container.show {
+  display: block;
+  animation: settingsSlideIn 0.4s ease-out;
+}
+
+@keyframes settingsSlideIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes settingsFadeOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
 }
 
 .wplace-settings {
@@ -1885,6 +1911,7 @@
   color: #775ce3;
 }
 
+/* Add spin animation for settings gear icon */
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }