From f68aa880dbfeab2b6b097e05a25bfe4e93725d7f Mon Sep 17 00:00:00 2001
From: copecone <controld3785@gmail.com>
Date: Sat, 9 May 2026 01:33:22 +0900
Subject: [PATCH] Update Skip Link Animation

---
 src/app/components/skip-links/skip-links.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/components/skip-links/skip-links.scss b/src/app/components/skip-links/skip-links.scss
index b5d7bad..112f878 100644
--- a/src/app/components/skip-links/skip-links.scss
+++ b/src/app/components/skip-links/skip-links.scss
@@ -28,6 +28,11 @@ $default_animation_duration: 0.4s;
   &:focus-within {
     top: -40px;
     outline: 2px solid var(--selection-outline-color);
+
+    ::ng-deep * {
+      // 내부에서 탭 이동 시에는 지연 없이 즉시 전환되도록 합니다.
+      transition: none;
+    }
   }
 
   ::ng-deep * {
@@ -48,9 +53,15 @@ $default_animation_duration: 0.4s;
     opacity: 0;
     overflow: hidden;
 
+    // Component에서 포커스가 나갈 때(애니메이션 중) 마지막 포커스된 요소가 유지되도록 지연 시간을 둡니다.
+    transition: opacity 0s var(--animation-duration), width 0s var(--animation-duration);
+    interpolate-size: allow-keywords;
+
     &:focus {
-      width: unset;
+      width: auto;
       opacity: 1;
+
+      transition: none;
     }
   }
 }