diff --git a/css/stereo.css b/css/stereo.css index e8249b1..3f93184 100644 --- a/css/stereo.css +++ b/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;