fade

API reference for the fade transition in Svelte

Animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.

Usage

<script>
	import { fade } from 'svelte/transition';
</script>

<div transition:fade>fades in and out</div>

<div in:fade>fades in</div>

<div out:fade>fades out</div>

Parameters

delay · number · default: "0"

Milliseconds before starting the transition

duration · number · default: "400"

Duration of the transition in milliseconds

easing · function · default: "linear"

An easing function that controls the animation curve

Example with parameters

<script>
	import { fade } from 'svelte/transition';
	import { cubicOut } from 'svelte/easing';
</script>

<div transition:fade={{ duration: 1000, easing: cubicOut }}>
	fades slowly
</div>