transition-style/transition.polygons.min.css

just add water clip-path mask transitions

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