Custom CSS Transitions

Any function (node, params) => { delay?, duration?, easing?, css?(t, u) } works — the same contract Svelte uses. Define it in <script> (a local function of the same name wins over a built-in) and name it:

<script>
  const spin = (node, { duration } = {}) => ({
    duration,
    css: (t) => `transform: scale(${t}) rotate(${t * 1080}deg)`,
  });
</script>

<transition in="spin({ duration: 800 })" out="fade"><div>…</div></transition>

css(t, u) is applied as inline style each frame. t goes 0→1 on enter and 1→0 on leave; u is 1 - t. Prefer css when the effect can be expressed as styles — it's the cheap path, and the element's own styling is restored when the animation ends.

Params are JSON-serialized, so you can't pass a function (like a custom easing) as a param — bake it into the transition function instead. Named easings from the built-in set can be passed as strings.

For effects styles can't express (rewriting text, driving a canvas), return a tick instead — see Custom JS transitions.