Improve settings menu animation

1 files changed, 9 insertions, 7 deletions

diff --git a/extension/src/index.css b/extension/src/index.css
index 54e8ea1..9d5a47e 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -27,11 +27,17 @@ body {
   background-color: black;
   padding: 10px;
   right: 0;
-  animation: slideIn 0.3s ease-in-out;
   display: flex;
   flex-direction: column;
   place-items: flex-start;
   z-index: 4;
+
+  transform: translateX(100%);
+  transition: all 0.2s ease-in-out;
+}
+
+#settings-menu.open {
+  transform: translateX(0);
 }
 
 .radio-group {
@@ -39,11 +45,6 @@ body {
   flex-direction: column;
 }
 
-@keyframes slideIn {
-  from { transform: translateX(100%); }
-  to   { transform: translateX( 0% ); }
-}
-
 /* Folder */
 .folderBody {
   width: 100%;
@@ -64,13 +65,14 @@ body {
 }
 
 @keyframes slideDown {
-  from { transform: translateY(-50%); opacity: 0 }
+  from { transform: translateY(-30%); opacity: 0 }
 }
 
 body > .folderBody {
   margin: 0;
   border-style: none;
   position: relative;
+  animation: none;
 }
 
 /* Bookmark */