theme-transition.css•1.47 kB
@keyframes theme-mask-scale {
0% {
mask-size: 0px;
mask-position: var(--theme-toggle-x, 50%) var(--theme-toggle-y, 0);
}
100% {
mask-size: 10240px;
mask-position: calc(var(--theme-toggle-x, 50%) - 5120px)
calc(var(--theme-toggle-y, 0) - 5120px);
}
}
/* Theme toggle specific transitions */
.theme-toggle-transition::view-transition-group(root) {
animation-duration: 750ms;
animation-timing-function: linear(
0 0%,
0.2342 12.49%,
0.4374 24.99%,
0.6093 37.49%,
0.6835 43.74%,
0.7499 49.99%,
0.8086 56.25%,
0.8593 62.5%,
0.9023 68.75%,
0.9375 75%,
0.9648 81.25%,
0.9844 87.5%,
0.9961 93.75%,
1 100%
);
}
.theme-toggle-transition::view-transition-new(root) {
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"><defs><filter id="blur"><feGaussianBlur stdDeviation="5"/></filter></defs><circle cx="0" cy="0" r="25" fill="white" filter="url(%23blur)"/></svg>')
0 0 / 100% 100% no-repeat;
mask-position: var(--theme-toggle-x, 50%) var(--theme-toggle-y, 0);
animation: theme-mask-scale 750ms ease-in-out;
transform-origin: var(--theme-toggle-x, 50%) var(--theme-toggle-y, 0);
}
.theme-toggle-transition::view-transition-old(root),
.theme-toggle-transition.dark::view-transition-old(root) {
animation: theme-mask-scale 750ms ease-in-out;
transform-origin: var(--theme-toggle-x, 50%) var(--theme-toggle-y, 0);
z-index: -1;
}