astro-vtbot/animations/swing.css

The 👜 Bag of Tricks ✨ for Astro's View Transitions

@keyframes FwdSwingOut {
	from {
		transform: rotate3d(1, 0, 0, 0);
		opacity: 1;
	}
	to {
		transform: rotate3d(1, 0, 0, 90deg);
		opacity: 1;
	}
}
@keyframes FwdSwingIn {
	from {
		transform: rotate3d(1, 0, 0, -90deg);
		opacity: 1;
	}
	to {
		transform: rotate3d(1, 0, 0, 0);
		opacity: 1;
	}
}
@keyframes BwdSwingOut {
	from {
		transform: rotate3d(1, 0, 0, 0);
		opacity: 1;
	}
	to {
		transform: rotate3d(1, 0, 0, -90deg);
		opacity: 1;
	}
}
@keyframes BwdSwingIn {
	from {
		transform: rotate3d(1, 0, 0, 90deg);
		opacity: 1;
	}
	to {
		transform: rotate3d(1, 0, 0, 0);
		opacity: 1;
	}
}
::view-transition-image-pair(*) {
	perspective: 50cm;
}