Built-in Transitions in Svelte
From the Svelte cheat sheet · Transitions & Animations · verified Jul 2026
Built-in Transitions
Svelte built-in transition functions
javascript
<script>
import { fade, fly, slide } from 'svelte/transition';
let visible = $state(true);
</script>
{#if visible}
<div transition:fade>
Fades in and out
</div>
<div transition:fly={{ x: 200 }}>
Flies in from right
</div>
<div transition:slide>
Slides down
</div>
{/if}🎭 Built-in transitions: fade, fly, slide, scale, blur, draw
⚡ Automatic animation on element mount/unmount
🎨 Customizable duration, delay, easing functions
🔄 Different in/out transitions supported