3d trail

css/stereo.css

@@ -151,7 +151,9 @@ tr.matrix td:not(.mino) {
 
 .minoes-table .mino::before,
 .minoes-table .mino + :not(.mino)::before,
-.minoes-table .mino::after {
+.minoes-table .mino::after,
+td.trail-animation::before,
+td.trail-animation::after {
   content: '';
   position: absolute;
   top: 0;
@@ -162,7 +164,8 @@ tr.matrix td:not(.mino) {
 }
 
 /* Front face */
-.minoes-table .mino {
+.minoes-table .mino,
+td.trail-animation {
   --light: calc(
     1
     + (var(--light-y) * 0.3)
@@ -237,7 +240,7 @@ tr.matrix td:not(.mino) {
 .ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
 .locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
 .disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
-
+td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
 
 
 #holdTable .J + :not(.mino),
@@ -253,6 +256,32 @@ tr.matrix td:not(.mino) {
   transform: translateX(50%);
 }
 
+@keyframes trail-animation {
+    from {
+        background-color: hsla(180, 100%, 100%, 0.1);
+        box-shadow: 0 0 10px  hsla(180, 100%, 100%, 0.2);
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+td.trail-animation::before,
+td.trail-animation::after {
+    animation: trail-animation ease-out .3s;
+}
+
+td.trail-animation::before {
+  transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
+  transform-origin: left;
+}
+
+td.trail-animation::after {
+  transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
+  transform-origin: right !important;
+}
+
+
 @keyframes cleared-line-animation {
   from {
     background-color: #ceffff66;