Transition parameters (duration, delay) in Svelte

Introduction

Transition parameters like duration and delay help control how long and when an animation happens. This makes your app feel smooth and natural.

When you want an element to fade in slowly instead of appearing instantly.

When you want to delay showing a message so it doesn't pop up too fast.

When you want to control how long a slide animation takes for better user experience.

When you want to chain animations by delaying the start of the next one.

Syntax

Svelte

transition:fade={{ duration: 500, delay: 200 }}

Use duration to set how many milliseconds the transition lasts.

Use delay to set how many milliseconds to wait before starting the transition.

Examples

This makes the element fade in over 1 second.

Svelte

<div transition:fade={{ duration: 1000 }}>Hello</div>

This waits half a second before starting the fade in.

Svelte

<div transition:fade={{ delay: 500 }}>Hello</div>

This waits 0.3 seconds, then fades in over 0.8 seconds.

Svelte

<div transition:fade={{ duration: 800, delay: 300 }}>Hello</div>

Sample Program

This Svelte component shows a button that toggles a message. The message uses the fade transition with a delay of 500ms and duration of 1000ms. It also includes accessibility features like aria-pressed and keyboard focus.

Svelte

<script>
  import { fade } from 'svelte/transition';
  let show = false;
</script>

<button on:click={() => show = !show} aria-pressed={show} aria-label="Toggle message">
  Toggle Message
</button>

{#if show}
  <p transition:fade={{ duration: 1000, delay: 500 }} tabindex="0">
    This message fades in after half a second and takes 1 second to appear.
  </p>
{/if}

Important Notes

You can combine duration and delay to create smooth, timed animations.

Always consider accessibility: use ARIA attributes and keyboard focus to help all users.

Summary

Transition parameters control timing of animations.

duration sets how long the animation lasts.

delay sets how long to wait before starting.