transition-style/transition.squares.min.css

just add water clip-path mask transitions

[transition-style]{animation-delay:var(--transition__delay,0);animation-duration:var(--transition__duration,2.5s);animation-timing-function:var(--transition__easing,cubic-bezier(.25,1,.3,1));animation-fill-mode:both;will-change:clip-path}@media (prefers-reduced-motion:reduce),print{[transition-style]{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}@keyframes square-in-hesitate{0%{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}40%{-webkit-clip-path:var(--square-hesitate);clip-path:var(--square-hesitate)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:hesitate"]{animation-name:square-in-hesitate}@keyframes square-out-hesitate{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}40%{-webkit-clip-path:var(--square-hesitate);clip-path:var(--square-hesitate)}to{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}}[transition-style="out:square:hesitate"]{animation-name:square-out-hesitate}@keyframes square-in-center{0%{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:center"]{animation-name:square-in-center}@keyframes square-out-center{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-out);clip-path:var(--square-out)}}[transition-style="out:square:center"]{animation-name:square-out-center}@keyframes square-out-top-left{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-top-left-out);clip-path:var(--square-top-left-out)}}[transition-style="out:square:top-left"]{--transition__duration:1.5s;animation-name:square-out-top-left}@keyframes square-out-top-right{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-top-right-out);clip-path:var(--square-top-right-out)}}[transition-style="out:square:top-right"]{--transition__duration:1.5s;animation-name:square-out-top-right}@keyframes square-out-bottom-left{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-bottom-left-out);clip-path:var(--square-bottom-left-out)}}[transition-style="out:square:bottom-left"]{--transition__duration:1.5s;animation-name:square-out-bottom-left}@keyframes square-out-bottom-right{0%{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}to{-webkit-clip-path:var(--square-bottom-right-out);clip-path:var(--square-bottom-right-out)}}[transition-style="out:square:bottom-right"]{--transition__duration:1.5s;animation-name:square-out-bottom-right}@keyframes square-in-top-left{0%{-webkit-clip-path:var(--square-bottom-right-out);clip-path:var(--square-bottom-right-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:top-left"]{animation-name:square-in-top-left}@keyframes square-in-top-right{0%{-webkit-clip-path:var(--square-bottom-left-out);clip-path:var(--square-bottom-left-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:top-right"]{animation-name:square-in-top-right}@keyframes square-in-bottom-left{0%{-webkit-clip-path:var(--square-top-right-out);clip-path:var(--square-top-right-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:bottom-left"]{animation-name:square-in-bottom-left}@keyframes square-in-bottom-right{0%{-webkit-clip-path:var(--square-top-left-out);clip-path:var(--square-top-left-out)}to{-webkit-clip-path:var(--square-in);clip-path:var(--square-in)}}[transition-style="in:square:bottom-right"]{animation-name:square-in-bottom-right}