chore: animate toolbar entrance

2 files changed, 28 insertions, 0 deletions

diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index aabec9a..408d769 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -25,6 +25,10 @@
   box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
     var(--color-shadow-dark);
 
+  :global {
+    animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
       --toolbar-size: auto;
@@ -39,6 +43,10 @@
       left: unset;
       margin-right: unset;
       transform: unset;
+
+      :global {
+        animation: slide-in-from-top 1s ease-in-out 0s 1;
+      }
     }
   }
 }
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 3485729..325c673 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -55,3 +55,23 @@
       var(--draw-border-width, fun.convert-px(3)) 100%;
   }
 }
+
+@keyframes slide-in-from-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-top {
+  0% {
+    transform: translateY(-200%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}