diff --git a/src/components/text/TextInlineEdit.svelte b/src/components/text/TextInlineEdit.svelte
index f50c7d1..c414190 100644
--- a/src/components/text/TextInlineEdit.svelte
+++ b/src/components/text/TextInlineEdit.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
   import { TRANSITION_DURATION } from "$lib/constants";
-  import { fly } from "svelte/transition";
+  import { fly, slide } from "svelte/transition";
   import Cross from "~icons/lucide/x";
 
   interface Props {
@@ -13,9 +13,18 @@
   let { text = $bindable(), id, ondelete }: Props = $props();
 </script>
 
-<li class="text-item" transition:fly={{ x: 600, duration: TRANSITION_DURATION }}>
-  <input type="text" bind:value={text} />
-  <Button icon={Cross} ariaLabel="Delete" type="danger" onclick={() => ondelete(id)} />
+<li
+  in:slide={{ duration: TRANSITION_DURATION / 2 }}
+  out:slide={{ duration: TRANSITION_DURATION / 2, delay: TRANSITION_DURATION }}
+>
+  <div
+    class="text-item"
+    in:fly={{ x: 600, duration: TRANSITION_DURATION, delay: TRANSITION_DURATION }}
+    out:fly={{ x: 600, duration: TRANSITION_DURATION }}
+  >
+    <input type="text" bind:value={text} />
+    <Button icon={Cross} ariaLabel="Delete" type="danger" onclick={() => ondelete(id)} />
+  </div>
 </li>
 
 <style>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index ff91a0c..f8c83e6 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -99,4 +99,4 @@ export const Theme = {
 
 export type ThemeType = (typeof Theme)[keyof typeof Theme];
 
-export const TRANSITION_DURATION = import.meta.env.MODE === "test" ? 0 : 300;
+export const TRANSITION_DURATION = import.meta.env.MODE === "test" ? 0 : 200;