svelte/site/content/examples/transitions-custom/App.html

<script>
	import * as eases from 'svelte/easing';
	import { fade } from 'svelte/transition';

	export let visible;

	const wheee = (node, params) => {
		return {
			duration: params.duration,
			css: t => {
				const eased = eases.elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`
			}
		};
	};
</script>

<input type=checkbox bind:checked={visible}> visible

{#if visible}
	<div class="centered" in:wheee="{{duration: 8000}}" out:fade>
		<span>wheeee!!!!!</span>
	</div>
{/if}

<style>
	.centered {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}

	span {
		position: absolute;
		transform: translate(-50%,-50%);
		font-size: 4em;
	}
</style>