Transition Parameters: duration delay easing
Customize transitions by passing duration, delay, and easing parameters.
Transition Parameters: duration delay easing is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Parameter Object
All transitions accept an options object as a second argument.
<p transition:fade={{ duration: 600, delay: 200 }}>duration
Total animation length in milliseconds. Default 400ms.
delay
Wait before starting the animation. Useful for sequenced UI.
easing
Function that maps linear progress (0..1) to a custom curve. Defaults to linear.
Built-in Easing Functions
Import from svelte/easing: linear, quadIn, cubicOut, elasticOut, etc.
import { elasticOut } from "svelte/easing";Per-transition Options
Each transition has its own params. Fly adds x and y; scale adds start.
Choosing Durations
Short durations (100-200ms) for micro-interactions, longer (400-700ms) for page transitions.
Reactive Parameters
Parameter values can depend on reactive state.
<p transition:fly={{ x: dir * 200 }}>...Default Behavior
If you omit the param object, sensible defaults apply.
Match the Design
Tune duration and easing until the motion feels right; test on a real device.
Accessibility
Respect prefers-reduced-motion by reducing duration or skipping transitions.
Quick Check
Where do easing functions come from?
Recap
Tweak duration, delay, and easing (from svelte/easing) for the right feel.
Frequently asked questions
Is the “Transition Parameters: duration delay easing” lesson free?
Yes — the full text of “Transition Parameters: duration delay easing” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Transition Parameters: duration delay easing”?
Customize transitions by passing duration, delay, and easing parameters. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Transition Parameters: duration delay easing” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- transition:fade and transition:fly
- Transition Parameters: duration delay easing
- in: and out: for Asymmetric Transitions
- transition:draw for SVG Paths