Splat animation

2024-07-25 16:02:22 -05:00
parent 89563a5de6
commit 7939b7cada
2 changed files with 22 additions and 0 deletions
@@ -10,3 +10,11 @@
  50% { transform: translateX(-1rem); }
  75% { transform: translateX(1rem); }
 }
+
+@keyframes splat {
+  0% { transform: scale(150%); opacity: 0; }
+  29% { transform: scale(150%); opacity: 0; }
+  30% { transform: scale(150%); opacity: 0.5; }
+  80% { transform: scale(90%); opacity: 1; }
+  100% { transform: scale(100%); }
+}
@@ -29,6 +29,20 @@
  place-items: center;
  position: relative;

+  .windshield & {
+    animation: splat 200ms normal forwards ease-in-out;
+
+    &:nth-of-type(2n) {
+      animation-delay: 50ms;
+    }
+
+    &:nth-of-type(4n) {
+      animation-delay: 100ms;
+    }
+
+    [data-turbo-preview] & { animation: none; }
+  }
+
  > * {
    grid-area: 1/1;
  }