src/styles/motion.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

:root {
	--ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
	--duration-fast: 0.15s;
	--duration-base: 0.24s;
	--duration-slow: 0.4s;
}

::view-transition-old(root) {
	animation: vt-slide-out var(--duration-base) var(--ease-out-quart) both;
}

::view-transition-new(root) {
	animation: vt-slide-in var(--duration-base) var(--ease-out-quart) both;
}

@keyframes vt-slide-out {
	to {
		transform: translateX(calc(var(--vt-direction, 1) * -200px));
		opacity: 0;
	}
}

@keyframes vt-slide-in {
	from {
		transform: translateX(calc(var(--vt-direction, 1) * 200px));
		opacity: 0;
	}
}