initial

lib/ionic/css/transition-style.css

@@ -0,0 +1,885 @@
+:root {
+    --circle-center-center-out: circle(0%);
+    --circle-center-center-in: circle(125%);
+    --circle-hesitate: circle(40%);
+    --circle-top-left-out: circle(0% at top left);
+    --circle-top-right-out: circle(0% at top right);
+    --circle-bottom-right-out: circle(0% at bottom right);
+    --circle-bottom-left-out: circle(0% at bottom left);
+    --circle-top-left-in: circle(150% at top left);
+    --circle-top-right-in: circle(150% at top right);
+    --circle-bottom-right-in: circle(150% at bottom right);
+    --circle-bottom-left-in: circle(150% at bottom left);
+    --wipe-in: inset(0 0 0 0);
+    --wipe-bottom: inset(100% 0 0 0);
+    --wipe-left: inset(0 100% 0 0);
+    --wipe-top: inset(0 0 100% 0);
+    --wipe-right: inset(0 0 0 100%);
+    --wipe-top-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+    --wipe-top-right-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+    --wipe-bottom-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+    --wipe-bottom-right-in: polygon(-50% 0%, 200% 0, 0 200%, 0 -50%);
+    --wipe-top-left-out: polygon(0 0, 0 0, 0 0, 0 50%);
+    --wipe-top-right-out: polygon(50% -50%, 150% 50%, 150% 50%, 50% -50%);
+    --wipe-bottom-left-out: polygon(-50% 50%, 50% 150%, 50% 150%, -50% 50%);
+    --wipe-bottom-right-out: polygon(150% 50%, 150% 50%, 50% 150%, 50% 150%);
+    --wipe-cinematic-out: inset(100% 0 100% 0);
+    --wipe-cinematic-mid: inset(10% 0 10% 0);
+    --square-hesitate: inset(33% 33% 33% 33%);
+    --square-out: inset(100% 100% 100% 100%);
+    --square-in: var(--wipe-in);
+    --square-top-left-out: inset(0 100% 100% 0);
+    --square-top-right-out: inset(0 0 100% 100%);
+    --square-bottom-left-out: inset(100% 100% 0 0);
+    --square-bottom-right-out: inset(100% 0 0 100%);
+    --diamond-center-in: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
+    --diamond-center-out: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+    --diamond-hesitate: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
+    --opposing-corners-in: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+    --opposing-corners-out: polygon(0 0, 50% 50%, 100% 100%, 50% 50%)
+}
+
+[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 wipe-out-top {
+    0% {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-top);
+        clip-path: var(--wipe-top)
+    }
+}
+
+[transition-style="out:wipe:top"],
+[transition-style="out:wipe:up"] {
+    animation-name: wipe-out-top
+}
+
+@keyframes wipe-out-right {
+    0% {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-right);
+        clip-path: var(--wipe-right)
+    }
+}
+
+[transition-style="out:wipe:right"] {
+    animation-name: wipe-out-right
+}
+
+@keyframes wipe-out-bottom {
+    0% {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-bottom);
+        clip-path: var(--wipe-bottom)
+    }
+}
+
+[transition-style="out:wipe:bottom"],
+[transition-style="out:wipe:down"] {
+    animation-name: wipe-out-bottom
+}
+
+@keyframes wipe-out-left {
+    0% {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-left);
+        clip-path: var(--wipe-left)
+    }
+}
+
+[transition-style="out:wipe:left"] {
+    animation-name: wipe-out-left
+}
+
+@keyframes wipe-in-top {
+    0% {
+        -webkit-clip-path: var(--wipe-top);
+        clip-path: var(--wipe-top)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+}
+
+[transition-style="in:wipe:down"],
+[transition-style="in:wipe:top"] {
+    animation-name: wipe-in-top
+}
+
+@keyframes wipe-in-right {
+    0% {
+        -webkit-clip-path: var(--wipe-left);
+        clip-path: var(--wipe-left)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+}
+
+[transition-style="in:wipe:right"] {
+    animation-name: wipe-in-right
+}
+
+@keyframes wipe-in-bottom {
+    0% {
+        -webkit-clip-path: var(--wipe-bottom);
+        clip-path: var(--wipe-bottom)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+}
+
+[transition-style="in:wipe:bottom"],
+[transition-style="in:wipe:up"] {
+    animation-name: wipe-in-bottom
+}
+
+@keyframes wipe-in-left {
+    0% {
+        -webkit-clip-path: var(--wipe-right);
+        clip-path: var(--wipe-right)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+}
+
+[transition-style="in:wipe:left"] {
+    animation-name: wipe-in-left
+}
+
+@keyframes wipe-in-top-right {
+    0% {
+        -webkit-clip-path: var(--wipe-bottom-left-out);
+        clip-path: var(--wipe-bottom-left-out)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-top-right-in);
+        clip-path: var(--wipe-top-right-in)
+    }
+}
+
+[transition-style="in:wipe:top-right"] {
+    animation-name: wipe-in-top-right
+}
+
+@keyframes wipe-in-top-left {
+    0% {
+        -webkit-clip-path: var(--wipe-bottom-right-out);
+        clip-path: var(--wipe-bottom-right-out)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-top-left-in);
+        clip-path: var(--wipe-top-left-in)
+    }
+}
+
+[transition-style="in:wipe:top-left"] {
+    animation-name: wipe-in-top-left
+}
+
+@keyframes wipe-in-bottom-right {
+    0% {
+        -webkit-clip-path: var(--wipe-top-left-out);
+        clip-path: var(--wipe-top-left-out)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-bottom-right-in);
+        clip-path: var(--wipe-bottom-right-in)
+    }
+}
+
+[transition-style="in:wipe:bottom-right"] {
+    animation-name: wipe-in-bottom-right
+}
+
+@keyframes wipe-in-bottom-left {
+    0% {
+        -webkit-clip-path: var(--wipe-top-right-out);
+        clip-path: var(--wipe-top-right-out)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-bottom-left-in);
+        clip-path: var(--wipe-bottom-left-in)
+    }
+}
+
+[transition-style="in:wipe:bottom-left"] {
+    animation-name: wipe-in-bottom-left
+}
+
+@keyframes wipe-out-top-right {
+    0% {
+        -webkit-clip-path: var(--wipe-bottom-left-in);
+        clip-path: var(--wipe-bottom-left-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-top-right-out);
+        clip-path: var(--wipe-top-right-out)
+    }
+}
+
+[transition-style="out:wipe:top-right"] {
+    animation-name: wipe-out-top-right
+}
+
+@keyframes wipe-out-top-left {
+    0% {
+        -webkit-clip-path: var(--wipe-bottom-right-in);
+        clip-path: var(--wipe-bottom-right-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-top-left-out);
+        clip-path: var(--wipe-top-left-out)
+    }
+}
+
+[transition-style="out:wipe:top-left"] {
+    animation-name: wipe-out-top-left
+}
+
+@keyframes wipe-out-bottom-right {
+    0% {
+        -webkit-clip-path: var(--wipe-top-left-in);
+        clip-path: var(--wipe-top-left-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-bottom-right-out);
+        clip-path: var(--wipe-bottom-right-out)
+    }
+}
+
+[transition-style="out:wipe:bottom-right"] {
+    animation-name: wipe-out-bottom-right
+}
+
+@keyframes wipe-out-bottom-left {
+    0% {
+        -webkit-clip-path: var(--wipe-top-right-in);
+        clip-path: var(--wipe-top-right-in)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-bottom-left-out);
+        clip-path: var(--wipe-bottom-left-out)
+    }
+}
+
+[transition-style="out:wipe:bottom-left"] {
+    animation-name: wipe-out-bottom-left
+}
+
+@keyframes wipe-cinematic-out {
+    0% {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+
+    30%,
+    70% {
+        -webkit-clip-path: var(--wipe-cinematic-mid);
+        clip-path: var(--wipe-cinematic-mid)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-cinematic-out);
+        clip-path: var(--wipe-cinematic-out)
+    }
+}
+
+[transition-style="out:wipe:cinematic"] {
+    animation-name: wipe-cinematic-out
+}
+
+@keyframes wipe-cinematic-in {
+    0% {
+        -webkit-clip-path: var(--wipe-cinematic-out);
+        clip-path: var(--wipe-cinematic-out)
+    }
+
+    30%,
+    70% {
+        -webkit-clip-path: var(--wipe-cinematic-mid);
+        clip-path: var(--wipe-cinematic-mid)
+    }
+
+    to {
+        -webkit-clip-path: var(--wipe-in);
+        clip-path: var(--wipe-in)
+    }
+}
+
+[transition-style="in:wipe:cinematic"] {
+    animation-name: wipe-cinematic-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"] {
+    animation-name: circle-in-hesitate
+}
+
+@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"] {
+    animation-name: circle-out-hesitate
+}
+
+@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"] {
+    animation-name: circle-in-center
+}
+
+@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"] {
+    animation-name: circle-out-center
+}
+
+@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;
+    animation-name: circle-out-top-left
+}
+
+@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;
+    animation-name: circle-out-top-right
+}
+
+@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;
+    animation-name: circle-out-bottom-left
+}
+
+@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;
+    animation-name: circle-out-bottom-right
+}
+
+@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"] {
+    animation-name: circle-in-top-left
+}
+
+@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"] {
+    animation-name: circle-in-top-right
+}
+
+@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"] {
+    animation-name: circle-in-bottom-left
+}
+
+@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"] {
+    animation-name: circle-in-bottom-right
+}
+
+@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
+}
+
+@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;
+    animation-name: polygon-in-opposing-corners
+}
+
+@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;
+    animation-name: polygon-out-opposing-corners
+}
+
+@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;
+    animation-name: diamond-in-center
+}
+
+@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;
+    animation-name: diamond-out-center
+}
+
+@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;
+    animation-name: diamond-in-double-scale
+}
+
+@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;
+    animation-name: diamond-out-double-scale
+}