diff --git a/src/components/MyList.vue b/src/components/MyList.vue
index 78796ad9848b3ec4038ec0a82600fdac3ef248f5..b6421062b6372f09626f374b511f9889e09d3fe8 100644
--- a/src/components/MyList.vue
+++ b/src/components/MyList.vue
@@ -1,6 +1,8 @@
 <template>
     <ul class="todo-main">
-        <MyItem v-for="item in todos" :key="item.id" :item="item"></MyItem>
+        <transition-group name="todo-item">
+            <MyItem v-for="item in todos" :key="item.id" :item="item"></MyItem>
+        </transition-group>
     </ul>
 </template>
 
@@ -35,4 +37,21 @@ export default {
         padding-left: 5px;
         margin-top: 10px;
     }
+
+    .todo-item-enter-active {
+        animation: horizontal-move 0.1s linear;
+    }
+
+    .todo-item-leave-active {
+        animation: horizontal-move 0.1s linear reverse;
+    }
+
+    @keyframes horizontal-move {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
 </style>
\ No newline at end of file