Adjust animations, use explicit transition properties

Author: nqst

app/assets/stylesheets/dialog.css

@@ -7,35 +7,41 @@
   :is(.dialog) {
     border: 0;
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.85);
     transform-origin: center;
-    transition: var(--dialog-duration) ease-out allow-discrete;
-    transition-property: opacity, overlay, transform;
+    transition-behavior: allow-discrete;
+    transition-duration: calc(var(--dialog-duration) / 2); /* Faster closing */
+    transition-property: display, opacity, overlay, transform;
+    transition-timing-function: ease-out;
 
     &::backdrop {
       background-color: var(--color-black);
-      opacity: 0.4;
-      transition: var(--dialog-duration) ease-out allow-discrete;
-      transition-property: opacity, overlay;
+      opacity: 0;
+      transition-behavior: allow-discrete;
+      transition-duration: calc(var(--dialog-duration) / 2);
+      transition-property: display, opacity, overlay;
+      transition-timing-function: ease-out;
     }
 
     &[open] {
       opacity: 1;
       transform: scale(1);
+      transition-duration: var(--dialog-duration); /* Normal opening speed */
 
       &::backdrop {
         opacity: 0.5;
+        transition-duration: var(--dialog-duration);
       }
     }
 
     @starting-style {
       &[open] {
         opacity: 0;
-        transform: scale(0.9);
+        transform: scale(0.85);
       }
 
       &[open]::backdrop {
-        opacity: 0.4;
+        opacity: 0;
       }
     }
   }