b1, can't use animate inside an each block?

    <ul>
        {#each todos as todo, index}
            <div class="li-box">
                <input class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />
                <span class="li-text" class:checked={todo.completed}>{todo.text}</span>
                <span class="edit-btn" on:click={() => editTodo(index)}>✏️</span>
                <span animate:flip class="delete-btn" on:click={() => removeTodo(index)}>❌</span>
            </div>
        {/each}
    </ul>

    <ul>
        {#each todos as todo, index}
            <div class="li-box">
                <input class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />
                <span class="li-text" class:checked={todo.completed}>{todo.text}</span>
                <span class="edit-btn" on:click={() => editTodo(index)}>✏️</span>
                <span animate:flip class="delete-btn" on:click={() => removeTodo(index)}>❌</span>
            </div>
        {/each}
    </ul>