Make modal backdrop appear nicely

I probably created too many similar keyframes

src/components/loader.css

@@ -3,18 +3,10 @@
   width: 16px;
   height: 16px;
   pointer-events: none;
-  animation: slow-appear 0.3s ease-in-out 1s both;
+  animation: appear 0.3s ease-in-out 1s both;
   vertical-align: middle;
   margin: 8px;
 }
-@keyframes slow-appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .loader-container.abrupt {
   animation: none;
 }

src/components/modal.css

@@ -10,6 +10,7 @@
   align-items: center;
   background-color: var(--backdrop-color);
   backdrop-filter: blur(24px);
+  animation: appear 0.5s var(--timing-function) both;
 }
 
 #modal-container > .light {

src/index.css

@@ -267,6 +267,15 @@ code {
 
 /* KEYFRAMES */
 
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;