diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 32f7eed..2d82acf 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -5603,6 +5603,21 @@ body[type='login'] {
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   border-radius: 0px;
   margin-top: 5px;
+  transform-origin: top center;
+  animation: emojiPickerIn 0.2s ease forwards;
+}
+.emoji-picker.picker-closing {
+  animation: emojiPickerOut 0.18s ease forwards;
+  pointer-events: none;
+  overflow: hidden;
+}
+@keyframes emojiPickerIn {
+  from { opacity: 0; transform: translateY(-8px) scaleY(0.96); }
+  to   { opacity: 1; transform: translateY(0)    scaleY(1); }
+}
+@keyframes emojiPickerOut {
+  from { opacity: 1; transform: translateY(0)    scaleY(1); }
+  to   { opacity: 0; transform: translateY(-8px) scaleY(0.96); }
 }
 
 /* Tabbed mode — switched to column layout by JS when packs are present */
@@ -5976,9 +5991,10 @@ video.emoji {
   transition: text-shadow 0.2s;
 }
 
-button.emoji-trigger:hover i {
+button.emoji-trigger:hover i,
+button.emoji-trigger.is-active i {
     color: var(--accent);
-    transition: .5s ease;
+    transition: color .2s ease;
 }
 
 .spoiler-trigger {
diff --git a/public/s/js/comments.js b/public/s/js/comments.js
index 27790ee..7b88572 100644
--- a/public/s/js/comments.js
+++ b/public/s/js/comments.js
@@ -4443,6 +4443,17 @@ class CommentSystem {
                 showTab(packs[0]?.id ?? null);
             };
 
+            // Helper: close picker with the out-animation, then hide
+            const closePicker = () => {
+                if (!picker || picker.style.display === 'none') return;
+                trigger.classList.remove('is-active');
+                picker.classList.add('picker-closing');
+                picker.addEventListener('animationend', () => {
+                    picker.style.display = 'none';
+                    picker.classList.remove('picker-closing');
+                }, { once: true });
+            };
+
             trigger.addEventListener('click', (e) => {
                 e.preventDefault();
 
@@ -4456,10 +4467,16 @@ class CommentSystem {
                 if (picker) {
                     const isVisible = picker.style.display !== 'none';
                     if (isVisible) {
-                        picker.style.display = 'none';
+                        closePicker();
                     } else {
                         buildPickerContent();
                         picker.style.display = '';
+                        // Re-trigger enter animation
+                        picker.classList.remove('picker-closing');
+                        picker.style.animation = 'none';
+                        picker.offsetHeight; // reflow
+                        picker.style.animation = '';
+                        trigger.classList.add('is-active');
                         requestAnimationFrame(() => requestAnimationFrame(() =>
                             window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
                         ));
@@ -4470,6 +4487,7 @@ class CommentSystem {
                 // Create picker only once
                 picker = document.createElement('div');
                 picker.className = 'emoji-picker';
+                trigger.classList.add('is-active');
 
                 // Prevent picker interactions from blurring the textarea, keeping the keyboard open
                 picker.addEventListener('mousedown', (e) => {