animation border bottom to menu items and translate menu

gvao · Nov 19, 2023 · 3572591 · 3572591
1 parent cf1a3f4
commit 3572591
Showing 1 changed file with 29 additions and 9 deletions.
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
@@ -30,8 +30,8 @@
     padding: 16px;
     height: 100vh;
 
-    /* display: none; */
-    display: flex;
+    display: none;
+    /* display: flex; */
 
     flex-direction: column;
     gap: 12px;
@@ -44,29 +44,38 @@
     bottom: 0;
     right: 0;
 
-    transform: translateY(100%);
+    transform: translate(0%, 100%);
     opacity: 0;
     /* transition: all 2s; */
-    animation: hideNav 3s forwards;
+    /* animation: hideNav 3s forwards; */
 }
 
 .nav__list.--show {
+    display: flex;
     animation-name: showNav;
     animation-duration: .8s;
     animation-fill-mode: forwards;
 }
 
 .nav__list.--hide {
+    display: none;
     animation-name: hideNav;
     animation-timing-function: ease;
     animation-duration: 1s;
     animation-fill-mode: forwards;
-    /* display: none; */
 }
 
 .nav__list .item {
     padding: 8px 10px;
     position: relative;
+    opacity: 0.7;
+    transition-property: transform, opacity;
+    transition-duration: 0.5s;
+}
+
+.nav__list .item:hover {
+    transform: scale(1.3);
+    opacity: 1;
 }
 
 .nav__list .item::after {
@@ -86,6 +95,13 @@
     animation: hideBorderBottom .7s ease-out forwards;
 }
 
+.nav__list .item:hover::after {
+    animation-name: hideBorderBottom;
+    animation-duration: 1s;
+    animation-fill-mode: reverse;
+    animation-timing-function: ease-in;
+}
+
 /* --------------------------- medias queries --------------------------- */
 
 @media (min-width: 768px) {
@@ -113,23 +129,27 @@
 @keyframes showNav {
     0% {
         opacity: 0;
+        transform: translate(100%, 100%);
     }
-
+    
     100% {
         display: flex;
         opacity: 1;
+        transform: translate(0%, 100%);
     }
 }
 
 @keyframes hideNav {
     0% {
         display: flex;
         opacity: 1;
+        transform: translate(0%, 100%);
     }
-
+    
     100% {
         display: none;
         opacity: 0;
+        transform: translate(100%, 100%);
     }
 }
 
@@ -145,9 +165,9 @@
         width: 100%;
         height: 5%;
     }
-    
+
     100% {
-        
+
         height: 0%;
         width: 0%;
     }