[1주차] 김동혁 미션 제출합니다.

script.js

@@ -40,8 +40,13 @@ document.addEventListener("DOMContentLoaded", function () {
     const deleteButton = document.createElement("button");
     deleteButton.textContent = "삭제";
     deleteButton.onclick = function () {
-      todoList.removeChild(todoItem);
-      removeTodoFromStorage(todoText);
+      // 애니메이션 클래스 추가
+      todoItem.classList.add("animate-fade-out");
+
+      todoItem.addEventListener("animationend", () => {
+        todoList.removeChild(todoItem);
+        removeTodoFromStorage(todoText);
+      });
     };
 
     // 완료 체크 이미지 생성

style.css

@@ -14,7 +14,7 @@ h1 {
   margin: 0;
 }
 
-/* 애니메이션 */
+/* 할일 추가 애니메이션 */
 @keyframes slideDownFadeIn {
   from {
     opacity: 0;
@@ -25,12 +25,27 @@ h1 {
     transform: translateY(0);
   }
 }
-
 .animate-slide-down {
   animation: slideDownFadeIn 0.2s ease-out forwards;
 }
 /*  */
 
+/* 할일 삭제 애니메이션 */
+@keyframes fadeOutScaleDown {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+.animate-fade-out {
+  animation: fadeOutScaleDown 0.3s ease-out forwards;
+}
+/*  */
+
 .wrapper {
   width: 100%;
   min-height: 100vh;