transition.circles.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 circle-in-hesitate{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}@keyframes circle-in-hesitate{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:hesitate"]{-webkit-animation-name:circle-in-hesitate;animation-name:circle-in-hesitate}@-webkit-keyframes circle-out-hesitate{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}@keyframes circle-out-hesitate{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}40%{-webkit-clip-path:var(--circle-hesitate);clip-path:var(--circle-hesitate)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:hesitate"]{-webkit-animation-name:circle-out-hesitate;animation-name:circle-out-hesitate}@-webkit-keyframes circle-in-center{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}@keyframes circle-in-center{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}}[transition-style="in:circle:center"]{-webkit-animation-name:circle-in-center;animation-name:circle-in-center}@-webkit-keyframes circle-out-center{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}@keyframes circle-out-center{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}}[transition-style="out:circle:center"]{-webkit-animation-name:circle-out-center;animation-name:circle-out-center}@-webkit-keyframes circle-out-top-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-left-out);clip-path:var(--circle-top-left-out)}}@keyframes circle-out-top-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-left-out);clip-path:var(--circle-top-left-out)}}[transition-style="out:circle:top-left"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-top-left;animation-name:circle-out-top-left}@-webkit-keyframes circle-out-top-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-right-out);clip-path:var(--circle-top-right-out)}}@keyframes circle-out-top-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-top-right-out);clip-path:var(--circle-top-right-out)}}[transition-style="out:circle:top-right"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-top-right;animation-name:circle-out-top-right}@-webkit-keyframes circle-out-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-left-out);clip-path:var(--circle-bottom-left-out)}}@keyframes circle-out-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-left-out);clip-path:var(--circle-bottom-left-out)}}[transition-style="out:circle:bottom-left"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-bottom-left;animation-name:circle-out-bottom-left}@-webkit-keyframes circle-out-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-right-out);clip-path:var(--circle-bottom-right-out)}}@keyframes circle-out-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-in);clip-path:var(--circle-center-center-in)}to{-webkit-clip-path:var(--circle-bottom-right-out);clip-path:var(--circle-bottom-right-out)}}[transition-style="out:circle:bottom-right"]{--transition__duration:1.5s;-webkit-animation-name:circle-out-bottom-right;animation-name:circle-out-bottom-right}@-webkit-keyframes circle-in-top-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-left-in);clip-path:var(--circle-top-left-in)}}@keyframes circle-in-top-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-left-in);clip-path:var(--circle-top-left-in)}}[transition-style="in:circle:top-left"]{-webkit-animation-name:circle-in-top-left;animation-name:circle-in-top-left}@-webkit-keyframes circle-in-top-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-right-in);clip-path:var(--circle-top-right-in)}}@keyframes circle-in-top-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-top-right-in);clip-path:var(--circle-top-right-in)}}[transition-style="in:circle:top-right"]{-webkit-animation-name:circle-in-top-right;animation-name:circle-in-top-right}@-webkit-keyframes circle-in-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-left-in);clip-path:var(--circle-bottom-left-in)}}@keyframes circle-in-bottom-left{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-left-in);clip-path:var(--circle-bottom-left-in)}}[transition-style="in:circle:bottom-left"]{-webkit-animation-name:circle-in-bottom-left;animation-name:circle-in-bottom-left}@-webkit-keyframes circle-in-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-right-in);clip-path:var(--circle-bottom-right-in)}}@keyframes circle-in-bottom-right{0%{-webkit-clip-path:var(--circle-center-center-out);clip-path:var(--circle-center-center-out)}to{-webkit-clip-path:var(--circle-bottom-right-in);clip-path:var(--circle-bottom-right-in)}}[transition-style="in:circle:bottom-right"]{-webkit-animation-name:circle-in-bottom-right;animation-name:circle-in-bottom-right}