CSS: Fade-in layer selection and legend panels.

1 files changed, 14 insertions, 1 deletions

diff --git a/style.css b/style.css
index 1189fa1..9a8002d 100644
--- a/style.css
+++ b/style.css
@@ -186,7 +186,6 @@ html, body {
 #layer-selection-panel,
 #map-legend-panel {
   position: relative;
-  display: block;
   min-width: min-content;
   max-width: 35%;
   width: revert;
@@ -196,6 +195,20 @@ html, body {
   --bs-modal-color: var(--bs-body-color);
   --bs-modal-padding: .75rem;
 }
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+#layer-selection-panel[aria-hidden="false"],
+#map-legend-panel[aria-hidden="false"] {
+  animation: fade-in .25s ease-in-out both;
+  display: block;
+}
+
 @media screen and (max-width: 576px) {
   #layer-selection-panel,
   #map-legend-panel {