CSS transition-delay 완전 정리 — 같은 시간을 줘도 늦게 출발하는 박스

 

 

Web Development · CSS Transition

CSS transition-delay —
같은 3초인데 한 박스만 1초 늦게 출발하는 이유

duration · delay · vendor prefix · hover로 자식 변형하기

시작 오늘 분석할 코드

같은 컨테이너 안에 박스 두 개를 넣는다. 둘 다 transition 시간은 3초로 동일한데, 한 박스에만 transition-delay: 1s를 추가했다. #ex에 hover 하면 두 박스가 동시에 회전+이동을 시작해야 할 것 같지만, 실제로는 한 박스가 1초 늦게 출발해서 끝나는 시점도 1초 차이가 난다.

<style> #ex { position: relative; width: 500px; height: 150px; margin: 0 auto; border: 1px solid #aaa; border-radius: 30px; padding: 20px; } #ex:hover .box { -webkit-transform: rotate(720deg); transform: rotate(720deg); margin-left: 420px; } .box { font-size: 12px; position: relative; width: 60px; height: 60px; margin-bottom: 10px; background-color: #eee; } #no-delay { transition-duration: 3s; border: 1px solid #ff6a00; } #delay { transition-duration: 3s; transition-delay: 1s; border: 1px solid #006aff; } </style> <div id="ex"> <div id="no-delay" class="box"> <p>no-delay</p> </div> <div id="delay" class="box"> <p>delay</p> </div> </div>

실제 출력 미리보기 — 테두리 박스 위에 마우스를 올려보세요

no-delay

delay

주황(no-delay)은 즉시 회전·이동 시작 / 파랑(delay)은 1초 기다렸다 시작

용어 용어 정리

transition두 상태 사이를 부드럽게 잇는 CSS 애니메이션

duration변화가 진행되는 시간(초·ms)

delay시작을 미루는 대기 시간

transform회전·이동·확대 등 형태 변환

rotate(720deg)제자리에서 두 바퀴(360×2) 회전

:hover마우스가 올라간 동안의 상태

자손 셀렉터#ex:hover .box → #ex 위 hover일 때 안의 .box

vendor prefix-webkit-, -moz-, -o- 등 브라우저 호환 접두어

---

1 왜 부모(#ex)에 hover를 거는가?

자식 박스 각각에 hover를 걸면 안 되나?

걸 수는 있지만 동작이 달라진다. 이번 코드의 핵심은 "부모 위에 마우스가 올라간 그 순간"에 두 박스가 동시에 반응하도록 만드는 것이다. 박스 각각에 hover를 걸면, 박스 위에 정확히 올라가야만 발동하므로 두 개를 같이 움직이게 할 수 없다.

#ex:hover .box ← 이 의미는 "#ex(부모) 위에 마우스가 있는 동안, 그 안에 있는 .box들에 다음 스타일을 적용"

※ 부모 hover 패턴이 자주 쓰이는 곳

• 카드 위에 마우스 → 안의 caption이 슬라이드 업
• 메뉴 위에 마우스 → 하위 메뉴가 펼쳐짐
• 이미지 위에 마우스 → 위에 덮인 텍스트가 페이드인

---

2 transition-duration — 변화에 걸리는 시간

transition-duration: 3s는 "지정된 속성이 바뀔 때 그 변화를 3초에 걸쳐 부드럽게 보여달라"는 뜻이다. 이 값이 없으면 hover 즉시 끝 상태로 점프해버린다.

duration 없음

• hover 즉시 끝 상태로 점프
• 딸깍 — 변화가 안 보임
• 회전·이동이 무시되는 게 아니라 0초 만에 끝남

duration 3s

• 3초 동안 천천히 회전+이동
• 중간 단계가 모두 보임
• 마우스를 떼면 다시 3초에 걸쳐 원위치

---

3 transition-delay — 출발을 미루는 시간

"같은 3초"가 다른 결과를 만드는 이유

#delay박스는 duration: 3s 외에 delay: 1s가 추가됐다. delay는 변화 시간을 늘리지 않는다. 출발 직전에 1초 동안 가만히 있다가, 그 후 3초에 걸쳐 변화한다는 뜻이다. 즉 끝나는 시점이 1초 더 늦어진다.

no-delay━━━━━━━━━━━━ 3초 회전+이동 ━━━━━━━━━━━━ ▶ 3.0s 도착
delay…1초 대기…━━━━━━━━━━━━ 3초 회전+이동 ━━━━━━━━━━━━ ▶ 4.0s 도착

※ 흔한 오해: "delay 1s + duration 3s = 총 4초짜리 애니메이션"이 아니다. "1초 정지 → 3초 변화"로 두 단계가 분리된다. 그래서 두 박스가 같은 거리를 가는데도 도착 순간이 1초 차이로 나타난다.

---

 

반응형

 

4 transform: rotate(720deg) — 왜 720도인가?

360도면 한 바퀴, 720도는 두 바퀴다. 시각적으로 한 바퀴는 "끝났는지 모르게" 자연스러워 보이지만, 두 바퀴는 "의도적으로 빙글빙글 돌고 있다"는 인상을 준다. 박스가 단순히 옆으로 미끄러지는 게 아니라 회전하면서 이동하므로 시선이 자연스럽게 따라간다.

rotate(0deg) → 그대로 rotate(180deg) → 거꾸로 (텍스트 뒤집힘) rotate(360deg) → 한 바퀴, 결과는 0deg과 같음 rotate(720deg) → 두 바퀴, 결과는 0deg과 같지만 가는 길이 두 번 회전

※ 회전 + 이동을 한 번에

• 이번 코드는 transform: rotate(...)와 margin-left를 따로 줬다
• 최신 방식: transform: translateX(420px) rotate(720deg) — 한 속성으로 묶기
• transform으로 묶으면 GPU 가속을 받아 더 부드럽고, margin 변화로 인한 레이아웃 재계산도 피함

---

5 -webkit-, -moz-, -o- — vendor prefix 정체

코드 안에 -webkit-transition-duration, -moz-transition-duration, -o-transition-duration 같은 줄이 반복된다. 이건 같은 속성을 4번 쓴 게 아니라, 옛날 브라우저들이 transition을 실험적으로 지원하던 시절의 호환 코드다.

접두어	대상 브라우저	현재 필요?
-webkit-	구버전 Safari, Chrome	거의 불필요 (일부 transform 잔존)
-moz-	구버전 Firefox	불필요
-o-	구버전 Opera	불필요 (Opera는 webkit 엔진으로 전환)
-ms-	IE / Edge legacy	거의 불필요
접두어 없음	모든 최신 브라우저	이것만 쓰면 충분

※ 2026년 기준 실무에서는 접두어 없는 한 줄만 써도 된다. 옛 코드를 읽을 때 "왜 같은 게 4번 적혀있지?" 하고 당황하지 않으려고 알아둔다.

---

6 브라우저가 hover에 반응하는 흐름

1

마우스가 #ex 영역 진입브라우저: "지금 #ex가 :hover 상태가 됐다"

2

#ex:hover .box 규칙 발동안에 있는 두 .box의 목표 상태를 "rotate(720deg) + margin-left:420px"로 설정

3

#no-delay (delay 없음)즉시 출발 → 3초에 걸쳐 회전·이동

4

#delay (delay 1s)1초 동안 정지 상태 유지 → 그 후 3초에 걸쳐 회전·이동

5

마우스가 #ex를 벗어남:hover 해제 → 두 박스 모두 원래 상태로 돌아가는 transition 재생 (역시 각자의 duration·delay 적용)

---

7 자주 하는 실수

실수	증상	해결
transition을 hover 쪽에 쓰기	hover로 들어갈 때만 부드럽고, 나갈 때는 점프	transition은 원래 상태(.box)에 정의 — 양방향 모두 적용
delay를 duration에 더하면 된다고 착각	"4초로 합치자"고 duration을 늘려버림	delay는 출발 지연, duration은 변화 시간 — 별개
</scirpt> 오타	html5shiv가 안 닫혀서 페이지가 깨짐	</script>로 정확히 (이번 원본 코드에 오타 있음)
자식 박스 각각에 hover	한 박스만 발동, 나머지는 가만히	부모(#ex:hover .box)에 걸어 동시 발동
vendor prefix만 쓰고 표준 속성 빠뜨림	최신 브라우저에서 작동 안 함	표준 속성(transition-duration)을 맨 마지막에 한 줄 추가
margin-left 변화로 이동	레이아웃 재계산이 일어나 끊겨 보임	transform: translateX()로 대체 — GPU 가속

---

8 현대식 대안 — shorthand 한 줄

최신 코드는 prefix를 모두 빼고, transition 단축 속성으로 한 줄에 정리한다. "속성 duration timing-function delay" 순서다.

옛 방식 (이번 원본)

-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;

현대식 (shorthand)

transition: all 3s ease 1s;

all = 모든 속성
3s = duration
ease = timing
1s = delay

---

핵심 한 줄 요약

transition두 상태 사이를 시간을 들여 잇는 애니메이션

duration변화가 진행되는 시간 — 0이면 점프

delay출발을 미루는 대기 시간 — duration과 별개

#ex:hover .box부모 위 hover 시 자식 변형 — 동시 발동 패턴

rotate(720deg)두 바퀴 회전 — 360deg과 결과는 같지만 길이 다름

transform vs margin이동은 transform이 GPU 가속·재계산 회피

vendor prefix옛 브라우저 호환 코드 — 2026년엔 거의 불필요

단축 표기transition: all 3s ease 1s; — 한 줄로 끝

Tags

#transition #transition-duration #transition-delay #transform #rotate #hover #vendor-prefix #shorthand #CSS #HTML #애니메이션 #호버효과 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

transition, transition-duration, transition-delay, transform, rotate, hover, vendor-prefix, shorthand, CSS, HTML, 애니메이션, 호버효과, 웹개발, 티스토리