transition-delay + translateY 슬라이드 효과 — 상품 hover 애니메이션

 

 

Web Development · Hover Animation

transition-delay + translateY 슬라이드
상품 hover 애니메이션 완전 정리

caption이 아래에서 슬라이드 업되는 쇼핑몰 카드 효과 만들기

시작 만들 결과물

쇼핑몰 상품 목록에서 이미지에 마우스를 올리면 어두운 캡션이 아래에서 슬라이드 업되어 상품 정보를 보여주는 효과. 이 짧은 인터랙션 안에 CSS3의 핵심 개념 6가지가 모두 들어 있다 — position, overflow, opacity, transform: translateY, transition, rgba. 그리고 transition-delay로 두 요소가 시간차를 두고 움직이는 패턴까지 함께 살펴본다.

용어 핵심 키워드

position: relative자식의 absolute 기준점

position: absolute기준점에서 자유롭게 배치

overflow: hidden박스 밖 내용 자르기

opacity0 ~ 1 투명도

rgba(0,0,0,0.6)반투명 배경색

translateY세로 이동 — 음수면 위로

transition-delay변환 시작 지연 시간

li:hover .captionli에 호버 시 자식 .caption 변화

---

1 상품 카드 슬라이드 효과 — 전체 코드

.prod-list li { position: relative; /* caption(absolute)의 기준 */ overflow: hidden; /* 처음에 캡션이 li 밖에 있음 — 잘라줌 */ float: left; margin: 10px; } .prod-list .caption { position: absolute; top: 200px; /* 처음엔 li 아래쪽에 숨어있음 */ width: 300px; height: 200px; background: rgba(0,0,0,0.6); /* 60% 검정 반투명 */ opacity: 0; /* 처음엔 투명 */ transition: all 0.2s ease-in-out; z-index: 10; /* 이미지 위에 올라감 */ } .prod-list li:hover .caption { opacity: 1; /* 보이게 */ transform: translateY(-200px); /* 위로 200px 슬라이드 */ }

실제 결과 — 카드에 마우스 올려보기

• PROD 1

  상품 1

  설명 텍스트

  가격 : 12,345원

• PROD 2

  상품 2

  설명 텍스트

  가격 : 12,345원

• PROD 3

  상품 3

  설명 텍스트

  가격 : 12,345원

---

2 동작 원리 — 한 단계씩 풀어보기

Step 1. li가 absolute 자식의 기준

li에 position: relative를 주면, 그 안의 position: absolute 자식(=caption)은 li 박스의 좌상단을 (0,0)으로 삼는다. 만약 li에 relative를 안 주면 caption은 페이지의 가장 가까운 position 부모(또는 body)를 기준으로 엉뚱한 곳에 떠버린다.

Step 2. caption은 li 아래에 숨어 있다

top: 200px = caption이 li의 위에서부터 200px 아래에 위치 → li 박스 밖, 아래쪽에 위치. 그리고 opacity: 0 → 안 보임.

Step 3. overflow: hidden으로 시각 차단

caption이 li 밖에 있어도 overflow: hidden이 없으면 사용자에게 보일 수 있다. 부모 li에 overflow: hidden을 주면 li 박스 밖의 모든 것이 잘려나간다.

Step 4. hover 시 두 가지 변화 동시 발생

1. opacity: 0 → 1 — 점점 보이게 (페이드 인)
2. transform: translateY(-200px) — 200px 위로 이동 → 정확히 li 안으로 들어옴

두 변화가 동시에 0.2초 동안 부드럽게 진행되면서 "아래에서 슬라이드 업되며 점점 진해지는" 효과가 만들어진다.

※ translateY가 top보다 좋은 이유

• top 변경 → 레이아웃 재계산(reflow) → 느림
• translateY → GPU 가속 → 부드럽고 빠름
• 모바일 60fps 애니메이션을 위해서는 transform과 opacity만 변경하는 것이 베스트 프랙티스

---

반응형

3 rgba — 반투명 색

일반 rgb(0,0,0)은 완전 불투명 검정. 마지막에 알파값(0~1)을 추가한 rgba(0,0,0,0.6)은 60% 불투명한 검정이다.

background: rgba(0, 0, 0, 0.6); /* 60% 검정 — 뒤가 살짝 비침 */ background: rgba(255, 255, 255, 0.3); /* 30% 흰색 — 글래스모피즘 */

opacity

• 요소 전체가 투명해짐
• 안의 텍스트도 함께 흐려짐
• 예: opacity: 0.6

rgba 알파값

• 해당 색상만 투명
• 안의 텍스트는 100% 선명함
• 예: background: rgba(0,0,0,.6)

---

4 transition-delay — 시간차 변환

두 요소가 같은 트리거(예: 부모 hover)에 반응하지만 서로 다른 시점에 움직이게 하려면 transition-delay를 사용한다.

#no-delay { transition-duration: 3s; /* delay 없음 — 호버 즉시 시작 */ } #delay { transition-duration: 3s; transition-delay: 1s; /* 1초 기다린 후 시작 */ }

실제 결과 — 박스 영역에 마우스 올리면

no-delay

delay 1s

▲ 위 박스는 즉시, 아래 박스는 1초 뒤 시작 — 두 박스 모두 720도 회전 + 우측 이동

transition 단축 표기로 delay 포함

/* property | duration | timing | delay */ transition: all 3s ease 1s; /* 1초 후 시작, 3초 동안 */

💡 transition-delay는 여러 요소를 순차적으로 등장시킬 때도 자주 쓰인다. 예: 메뉴 항목 5개를 0.1s씩 차이를 두고 펼치는 효과.

---

5 상품 카드 응용 — translateY의 다른 패턴

패턴	변환	효과
아래에서 위로 (현재 예제)	translateY(-200px)	전형적인 캡션 슬라이드 업
위에서 아래로	translateY(200px)	드롭다운 메뉴
왼쪽에서 우측으로	translateX(200px)	사이드바 슬라이드
회전하며 등장	translateY + rotate	화려한 등장 효과
줌인하며 등장	scale(0.8 → 1) + opacity	모달 등장 효과

---

6 자주 하는 실수

실수	증상	해결
li에 position 미지정	caption이 화면 끝으로 튐	position: relative 추가
overflow:hidden 누락	처음부터 캡션이 보임	li에 overflow:hidden
transition을 :hover에 줌	호버 들어갈 때만 부드러움	원본 셀렉터(.caption)에 부여
opacity:0 자체로는 안 사라짐	마우스 클릭이 가능	display 또는 pointer-events:none 병행
z-index 안 줌	이미지가 캡션을 가림	caption에 더 높은 z-index
top/left 변경으로 애니메이션	모바일에서 끊김	transform 사용

---

요약 핵심 한 줄 정리

상품 hover 슬라이드 핵심

li (relative)caption(absolute)의 기준점 + overflow:hidden

caption (absolute)처음 li 밖에 숨김 + opacity:0

rgba(0,0,0,.6)반투명 검정 — 텍스트는 선명 유지

li:hover .captionopacity:1 + translateY(-200px)

transition: all .2s두 변화 동시 부드럽게

transition-delay변환 시작을 N초 늦춤 — 시간차 효과

단축 표기all 3s ease 1s (property duration timing delay)

성능 최적화transform + opacity만 변경 → GPU 가속

Tags

#transition-delay #translateY #hover효과 #상품카드 #opacity #overflow #rgba #슬라이드애니메이션 #position #CSS3 #웹개발 #티스토리

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

transition-delay, translateY, hover효과, 상품카드, opacity, overflow, rgba, 슬라이드애니메이션, position, CSS3, 웹개발, 티스토리