[keyed each block](each#Keyed-each-blocks) のコンテンツが並べ替えられると、アニメーションがトリガーされます。アニメーションは要素が追加または削除されたときには実行されず、each ブロック内の既存データ項目のインデックスが変更された場合にのみ実行されます。animate ディレクティブは、keyed each ブロックの _直下_ にある要素に付ける必要があります。

アニメーションは、Svelte の [組み込みアニメーション関数](svelte-animate) または [カスタムアニメーション関数](#Custom-animation-functions) を使用して実現できます。

```svelte
<!-- When `list` is reordered the animation will run -->
{#each list as item, index (item)}
	<li animate:flip>{item}</li>
{/each}
```

## Animation Parameters

action や transition と同様に、アニメーションにもパラメータを設定することができます。

(二重の `{{curlies}}` は特別な構文ではありません。これは式タグ内のオブジェクトリテラルです。)

```svelte
{#each list as item, index (item)}
	<li animate:flip={{ delay: 500 }}>{item}</li>
{/each}
```

## Custom animation functions

```js
/// copy: false
// @noErrors
animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
	delay?: number,
	duration?: number,
	easing?: (t: number) => number,
	css?: (t: number, u: number) => string,
	tick?: (t: number, u: number) => void
}
```

アニメーションには、`node`、`animation` オブジェクト、および任意の `parameters` を引数として提供するカスタム関数を使用することができます。`animation` パラメータは、要素の `start` と `end` の位置を記述した [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) を含む `from` および `to` プロパティを持つオブジェクトです。`from` プロパティは要素の開始位置を表す DOMRect で、`to` プロパティはリストが並べ替えられて DOM が更新された後の要素の最終位置を表す DOMRect です。

返されたオブジェクトに `css` メソッドがある場合、Svelte は要素上で再生される [web animation](https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API) を作成します。

`css` に渡される `t` 引数は、`easing` 関数が適用された後に `0` から `1` に変化する値です。`u` 引数は `1 - t` に等しい値です。

この関数は、アニメーションが開始する前に異なる `t` および `u` 引数で繰り返し呼び出されます。

<!-- TODO: Types -->

```svelte
<!--- file: App.svelte --->
<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }} states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}
```

カスタムアニメーション関数は `tick` 関数を返すことも可能で、これはアニメーション中に同じ `t` および `u` 引数で呼び出されます。

> [!NOTE] `tick` の代わりに `css` を使用できる場合はそうしてください — web animation はメインスレッド外で実行できるため、遅いデバイスでのカクつきを防ぐことができます。

```svelte
<!--- file: App.svelte --->
<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }} states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}
```