transition.squares.min.css

[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 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)}}@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"]{-webkit-animation-name:square-in-hesitate;animation-name:square-in-hesitate}@-webkit-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)}}@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"]{-webkit-animation-name:square-out-hesitate;animation-name:square-out-hesitate}@-webkit-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)}}@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"]{-webkit-animation-name:square-in-center;animation-name:square-in-center}@-webkit-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)}}@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"]{-webkit-animation-name:square-out-center;animation-name:square-out-center}@-webkit-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)}}@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;-webkit-animation-name:square-out-top-left;animation-name:square-out-top-left}@-webkit-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)}}@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;-webkit-animation-name:square-out-top-right;animation-name:square-out-top-right}@-webkit-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)}}@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;-webkit-animation-name:square-out-bottom-left;animation-name:square-out-bottom-left}@-webkit-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)}}@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;-webkit-animation-name:square-out-bottom-right;animation-name:square-out-bottom-right}@-webkit-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)}}@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"]{-webkit-animation-name:square-in-top-left;animation-name:square-in-top-left}@-webkit-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)}}@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"]{-webkit-animation-name:square-in-top-right;animation-name:square-in-top-right}@-webkit-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)}}@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"]{-webkit-animation-name:square-in-bottom-left;animation-name:square-in-bottom-left}@-webkit-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)}}@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"]{-webkit-animation-name:square-in-bottom-right;animation-name:square-in-bottom-right}