animate view counter

src/components/ViewCounter.astro

@@ -28,22 +28,79 @@
       padding: 0.25rem;
       font-size: 1.25rem;
       span {
-        display: inline-block;
+        display: inline-flex;
+        position: relative;
         background: black;
         color: white;
         padding: 0.5ch;
         font-family: monospace;
+        min-width: 1.5rem;
+        min-height: 2rem;
+        overflow: hidden;
+        &::before {
+          position: absolute;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          content: "?";
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+        &::after {
+          content: attr(data-number);
+          position: absolute;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          top: -100%;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+        &[data-number] {
+          &::before {
+            animation-delay: inherit;
+            animation-duration: 0.2s;
+            animation-name: spin-before;
+            animation-fill-mode: forwards;
+          }
+          &::after {
+            animation-delay: inherit;
+            animation-duration: 0.2s;
+            animation-name: spin-after;
+            animation-fill-mode: forwards;
+          }
+        }
       }
     }
 
   }
 
-  @media (max-width: 800px) {
+  @container(max-width: 175px) {
     .view-counter {
       margin: 0 auto;
     }
   }
 
+  @keyframes spin-before {
+    0% {
+      top: 0;
+    }
+    100% {
+      top: 100%;
+    }
+  }
+  @keyframes spin-after {
+    0% {
+      top: -100%;
+    }
+    100% {
+      top: 0;
+    }
+  }
+
 </style>
 
 <script>
@@ -77,7 +134,9 @@
     viewCounter.innerHTML = "";
     for (let i = 0; i < chars.length; i++) {
       const span = document.createElement("span");
-      span.textContent = chars[i];
+      span.setAttribute("data-number", chars[i]);
+      span.setAttribute("aria-label", chars[i]);
+      span.style.animationDelay = `${i * 0.05}s`;
       viewCounter.appendChild(span);
     }
     setTimeout(updateViewCount, 10000);