Skip to main content
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>