왕진 블로그
반응형
Web Development · CSS Transition
CSS transition 기초 —
transition-property · transition-duration
"무엇을 / 몇 초 동안" 부드럽게 바꿀지 지정하는 두 속성
시작 오늘 분석할 코드
마우스를 올리면 박스가 커지는데, 그냥 "탁" 바뀌는 게 아니라 가로는 2초, 세로는 1초에 걸쳐 부드럽게 변한다. transition-property와 transition-duration을 콤마로 묶어 속성마다 다른 시간을 지정한 코드다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Transform</title> <style> .tr1 { width: 100px; height: 100px; background-color: blue; border: 1px solid black; /*속성을 직접 지정 여러개의 속성 지정 시 콤마(,)로 구분함*/ -webkit-transition-property: width, height; -moz-transition-property: width, height; -o-transition-property: width, height; transition-property: width, height; /*변환될 속성값에 대해 각각 초를 지정함 */ -webkit-transition-duration: 2s, 1s; -moz-transition-duration: 2s, 1s; -o-transition-duration: 2s, 1s; transition-duration: 2s, 1s; } .tr1:hover { width: 200px; height: 120px; } </style> </head> <body> <div class="tr1"></div> </body> </html>
실제 출력 미리보기 (마우스를 박스 위에 올려보세요)
가로는 2초, 세로는 1초 동안 부드럽게 커집니다 (색상은 데모상 초록)
용어 용어 정리
transition"전환" — 한 상태에서 다른 상태로 부드럽게 변함
propertyCSS 속성(이름) — width, color 등
duration지속 시간 (s = 초, ms = 밀리초)
:hover마우스가 요소 위에 올라간 상태
-webkit-크롬·사파리(웹킷) 전용 접두사
-moz-파이어폭스 전용 접두사
-o-구버전 오페라 전용 접두사
콤마(,)여러 속성·시간을 동시에 나열
1 transition은 왜 필요한가?
transition이 없으면 어떻게 보이는가?
CSS에서 :hover로 width를 100px → 200px로 바꾸면, 기본 동작은 1프레임에 즉시 변경된다. 사용자 입장에서는 "툭" 튀어 보여서 부자연스럽다.
/* transition 없음 */ .tr1 { width: 100px; } .tr1:hover { width: 200px; } → 마우스 올리는 순간 즉시 200px (점프)
transition은 그 변화를 시간 위에 펼쳐서 부드럽게 만들어준다. "100 → 101 → 102 → ... → 200"으로 매 프레임 보간(interpolate)되어 그려진다.
※ transition은 "두 상태 사이의 다리"다. 시작 상태(.tr1)와 끝 상태(.tr1:hover)는 그대로 두고, 그 사이를 부드럽게 채울 시간만 알려주는 것.
2 transition-property — 무엇을 바꿀까?
왜 "어떤 속성을 transition할지" 정해야 하는가?
transition-property는 "이 속성이 바뀔 때만 부드럽게 처리해라"라고 지정하는 것이다. 모든 속성에 무조건 transition을 적용하면 의도치 않은 곳까지 느려질 수 있어, 명시적으로 골라준다.
transition-property: width, height; → width와 height만 부드럽게 → background-color가 바뀌어도 즉시 변함
※ 콤마(,)의 의미
- 여러 속성을 한 번에 지정할 때 사용
- 순서가 중요 — duration의 순서와 1:1로 짝이 됨
all로 쓰면 "변할 수 있는 모든 속성"을 의미 (간편하지만 성능에 부담)
반응형
3 transition-duration — 얼마 동안?
2s, 1s — 두 시간이 따로 작동한다
이번 코드의 핵심 포인트는 속성마다 다른 시간을 줬다는 것이다. transition-property의 첫 번째(width)는 2초, 두 번째(height)는 1초가 적용된다.
| property 순서 | 속성 | duration | 동작 |
|---|---|---|---|
| 1번째 | width |
2s | 100 → 200px를 2초에 걸쳐 |
| 2번째 | height |
1s | 100 → 120px를 1초에 걸쳐 |
그래서 마우스를 올리면 가로는 천천히, 세로는 빨리 커지는 비대칭 효과가 생긴다.
※ duration 개수가 property 개수보다 적으면 처음부터 다시 반복된다. 예:
property: a,b,c,d + duration: 1s, 2s → a,c는 1초 / b,d는 2초.4 브라우저 접두사 — 왜 4번이나 같은 걸 쓰나?
-webkit-, -moz-, -o-, (없음) 의 정체
예전 브라우저들은 transition 같은 신기능을 "실험적 기능"으로만 지원했다. 그래서 각 엔진은 자기 접두사를 붙인 버전만 인식했다.
접두사 별 엔진
-webkit-크롬·사파리·신엣지-moz-파이어폭스-o-구버전 오페라-ms-구버전 IE/엣지
표준
- 접두사 없는
transition - 현재 모든 메이저 브라우저 지원
- 2016년 이후엔 사실상 표준만 써도 충분
※ 같은 속성을 4번 쓰는 이유: 어느 엔진을 쓰는지 모르니 모두에게 동시에 알려주는 것. 표준이 마지막에 와야 우선 적용된다 (CSS는 같은 속성에서 나중 선언이 이김).
5 진행 흐름 — 마우스가 올라간 순간부터
1
초기 상태.tr1: width 100px, height 100px (파란 정사각형)
2
마우스 진입:hover 발동 — 목표값 width 200px, height 120px로 설정됨
3
transition 작동브라우저가 "현재값 → 목표값"을 시간 단위로 보간 시작
4
0~1초width와 height가 동시에 변함 (height는 이때 100 → 120 완료)
5
1~2초height는 멈춤, width만 계속 늘어남 (200px까지)
6
마우스 이탈역방향 transition — 다시 100×100으로 부드럽게 돌아감
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| transition을 :hover 안에 둠 | 들어갈 때만 부드럽고 나올 때는 즉시 점프 | 기본 셀렉터(.tr1)에 transition 작성 |
| duration 단위 빼먹음 (2 만 적음) | 해당 속성 전체가 무시됨 | 반드시 2s / 2000ms |
| property 순서와 duration 순서 꼬임 | 의도와 다른 속성에 시간이 적용 | property와 duration의 인덱스를 맞춤 |
| display, visibility 같은 비-수치 속성 | transition이 안 먹힘 | 이 속성들은 보간 불가 → opacity로 대체 |
| 접두사만 쓰고 표준 빠뜨림 | 최신 브라우저에서 동작 불안정 | 접두사 → 표준 순으로 모두 작성 |
7 한 줄 단축형으로 줄이면
실무에서는 transition 한 줄로 끝낸다
transition은 property duration timing-function delay를 한꺼번에 적는 단축 속성이다. 이번 코드를 단축형으로 바꾸면 다음과 같다.
/* 길게 쓴 원본 */ transition-property: width, height; transition-duration: 2s, 1s; /* 단축형 — 같은 결과 */ transition: width 2s, height 1s;
※ 단축형 권장
- 코드량이 절반 이하로 줄어든다
- 각 속성·시간이 한 줄에 묶여 있어 매칭이 명확
- 접두사 또한
-webkit-transition: ...한 줄로 끝
핵심 한 줄 요약
transition두 상태 사이를 시간으로 부드럽게 잇는 다리
transition-property"어떤 속성을" 부드럽게 할지 — 콤마로 여러 개
transition-duration"몇 초 동안" — 단위(s/ms) 필수
콤마 매칭property 순서 ↔ duration 순서가 1:1로 짝
:hover에 두지 말 것기본 셀렉터에 transition을 작성
접두사-webkit-/-moz-/-o-/표준 (구버전 호환)
단축형transition: width 2s, height 1s; 추천
Tags
#transition #transition-property #transition-duration #hover #부드러운전환 #인터랙션 #애니메이션기초 #ease #vendor-prefix #transition단축 #CSS3 #보간 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
transition, transition-property, transition-duration, hover, 부드러운전환, 인터랙션, 애니메이션기초, ease, vendor-prefix, transition단축, CSS3, 보간, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS transition 단축형 — transition: 2s ease-in 한 줄로 끝내기 (0) | 2026.06.08 |
|---|---|
| CSS transition 여러 속성 동시 변환 — 색상·회전·크기 한꺼번에 (0) | 2026.06.08 |
| CSS3 animation — 2개 keyframes 동시 + 3D 회전 완전 정리 (0) | 2026.06.05 |
| CSS3 animation — 속성 5종 + transform 활용 완전 정리 (0) | 2026.06.05 |
| CSS3 backface-visibility — 3D 회전 시 뒷면 표시 완전 정리 (0) | 2026.06.05 |
댓글