stripe line clear animation

2023-12-23 03:02:17 +01:00 · 2023-12-23 03:02:17 +01:00 · d56a8a6b06
commit d56a8a6b06
parent e1992f4c1e
1 changed files with 24 additions and 0 deletions
--- a/css/pop.css
+++ b/css/pop.css
@ -92,4 +92,28 @@ tr.matrix td:not(.mino) {
 .locked.mino {
    animation: locked-animation;
    animation-duration: 0.2s;
+}
+
+tr.cleared-line-animation {
+    animation: none;
+}
+
+tr.cleared-line-animation::after {
+    content: "";
+    width: 100%;
+    height: var(--cell-side);
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    display: block;
+    background: repeating-linear-gradient(transparent, #fffb 1px);
+    opacity: 0;
+    animation: cleared-line-animation ease-out .3s;
+}
+
+@keyframes cleared-line-animation {
+    25% {
+        width: 200%;
+        opacity: 100%;
+    }
 }