Merge pull request #178 from AJ-Quran/177-menu-animation

Menu Animation
AJ-Quran · May 7, 2024 · 8b55315 · 8b55315
2 parents 43bd0cb + 5d88d39
commit 8b55315
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/css/utils/animation/animation.css b/src/css/utils/animation/animation.css
@@ -1,3 +1,15 @@
+@keyframes toTranslateX0 {
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes toTranslateY0 {
+  to {
+    transform: translateY(0);
+  }
+}
+
 @keyframes scaleTo1 {
   to {
     scale: 1;

diff --git a/src/pages/Main/Main.css b/src/pages/Main/Main.css
@@ -10,6 +10,8 @@
   height: 100%;
   padding: var(--pd-small-very);
   padding-right: 0;
+  transform: translate(-100%, 0);
+  animation: toTranslateX0 0.6s 0.1s ease-in-out forwards;
 }
 
 .is_phone {
@@ -18,6 +20,8 @@
     height: var(--menu-size);
     bottom: 0;
     padding: var(--pd-small-very);
+    transform: translate(0, 100%);
+    animation: toTranslateY0 0.6s 0.1s ease-in-out forwards;
   }
 }