diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css
index 2f46bfa..60fef57 100644
--- a/src/components/Filter/Filter.module.css
+++ b/src/components/Filter/Filter.module.css
@@ -2,14 +2,23 @@
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: max-height 0.5s ease, opacity 0.8s ease, transform 0.5s ease;
 }
 
 .filterOpen {
-    display: flex;
+    max-height: 200px;
+    opacity: 1;
+    transform: translateY(0);
 }
 
 .filterClose{
-    display: none;
+    max-height: 200px;
+    opacity: 0;
+    transform: translateY(-10px);
 }