[transition-style="out:wipe:bottom-left"] {
	animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-bottom-left both;
}


[transition-style="in:wipe:top-left"] {
	animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-top-left both;
}

[transition-style="in:circle:hesitate"] {
	animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-hesitate both;
}

@keyframes circle-in-hesitate {
	0% {
		clip-path: circle(0%);
	}

	40% {
		clip-path: circle(40%);
	}

	100% {
		clip-path: circle(125%);
	}
}

@keyframes wipe-out-bottom-left {
	from {
		clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
	}

	to {
		clip-path: polygon(-50% 50%, 50% 150%, 50% 150%, -50% 50%);
	}
}

@keyframes wipe-in-top-left {
	from {
		clip-path: polygon(150% 50%, 150% 50%, 50% 150%, 50% 150%);
	}

	to {
		clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
	}
}