attempt at animations

src/pages/menu.svelte

@@ -66,9 +66,11 @@
         <h2>Paused</h2>
         <p>Angels are waiting - don't spend too much time here</p>
         {#each buttons as button, i}
-            <Button active={activeButton === i} on:click={() => select(i)}>
+            <div class="button" style="--movein-delay: {(1.5 * Number(i) + 2.5) / 10}s;">
-                {button.text}
+                <Button active={activeButton === i} on:click={() => select(i)}>
-            </Button>
+                    {button.text}
+                </Button>
+            </div>
         {/each}
     </div>
 </div>
@@ -82,8 +84,38 @@
         height: 100vh;
         background: rgba(0,0,0,0.8);
         color: white;
+        animation: opacity .3s;
+    }
+    @keyframes opacity {
+        from { opacity: 0; }
+        to { opacity: 1; }
     }
     .options {
         text-align: center;
     }
+    .options h2 {
+        --movein-delay: .1s;
+    }
+    .options p {
+        --movein-delay: .20s;
+    }
+    .button {
+        width: 100%;
+    }
+    @keyframes moveIn {
+        from {
+            transform: translateY(75px);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+    .options > * {
+        animation-fill-mode: both;
+        /* animation: moveIn .2s; */
+        animation-timing-function: ease-in;
+        animation-delay: var(--movein-delay);
+    }
 </style>