왕진 블로그
반응형
Web Development · CSS Transition
CSS transition 단축형 —
한 줄로 모두 끝내기
transition: 2s ease-in 한 줄이 어떻게 모든 변화에 적용되는가
시작 오늘 분석할 코드
이전 예제들은 transition-property와 transition-duration을 따로 적었지만, 이번 코드는 transition: 2s ease-in 한 줄로 끝낸다. 그런데도 width, height, background-color, transform이 모두 부드럽게 변한다. 그 비밀이 핵심이다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Transform</title> <style> .tr1 { width: 200px; height: 200px; background-color: red; border: 1px solid black; transition: 2s ease-in; } .tr1:hover { width: 100px; height: 100px; background-color: #ff6e5f; transform: rotate(270deg); } </style> </head> <body> <div class="tr1"></div> </body> </html>
실제 출력 미리보기 (마우스를 박스에 올려보세요)
호버 시 작아지면서 270도 회전 — 시작이 느리고 끝이 빠른 ease-in 곡선
용어 용어 정리
단축 속성여러 개별 속성을 한 줄에 묶어서 표기
transitionproperty duration timing-function delay 통합
all생략 시 기본값 — 모든 속성에 적용
ease-in처음 느리다가 점점 빨라짐
timing-function시간에 따른 변화 곡선
270deg시계방향 ¾바퀴 — 왼쪽으로 90도와 같은 위치
linear처음부터 끝까지 일정한 속도
delay시작 전 기다리는 시간 (이번 코드엔 없음)
1 "2s ease-in" 한 줄에 무엇이 들어 있나?
단축형 transition의 4가지 부품
transition은 다음 4개를 한 번에 지정하는 단축 속성이다.
transition: [property] [duration] [timing-function] [delay]; 순서 예시: transition: width 2s ease-in 0.5s; ↑ ↑ ↑ ↑ 대상 지속 곡선 지연
이번 코드는 transition: 2s ease-in;으로 property와 delay를 생략했다. 생략된 값은 기본값으로 채워진다.
| 부품 | 이번 코드 | 의미 |
|---|---|---|
| property | (생략) | 기본값 all — 모든 변할 수 있는 속성 |
| duration | 2s | 2초 동안 변환 |
| timing-function | ease-in | 처음 느리다가 점점 빨라짐 |
| delay | (생략) | 기본값 0s — 즉시 시작 |
2 왜 width·height·color·transform 모두 부드럽게 변하나?
생략된 property = all 의 위력
property를 안 적으면 CSS는 all로 간주한다. 이 한 단어가 "호버에서 변하는 모든 속성을 부드럽게 처리해라"라는 뜻이라, 4가지 속성이 한 번에 처리된다.
all (생략 시 기본)
- 호버에서 바뀌는 모든 속성
- 코드가 짧고 간단
- 새 속성이 추가돼도 자동 적용
- 대부분의 학습·간단한 UI에 적합
all 의 단점
- 의도치 않은 속성까지 transition
- 레이아웃 속성에 부담 (성능)
- 실무 큰 컴포넌트에선 명시 권장
- 예:
transition: transform .3s
반응형
3 ease-in vs linear vs ease-out
시간 곡선이 같은 2초를 얼마나 다르게 보이게 하는가?
ease-in은 "천천히 시작 → 빨리 끝"이다. 자동차가 정지에서 출발해 점점 가속하는 느낌. 같은 2초 안에 처음 1초는 거의 안 움직이다 후반에 확 변한다.
| 키워드 | 곡선 모양 | 느낌 |
|---|---|---|
linear |
직선 | 일정한 속도 (기계적) |
ease |
S자 (기본값) | 천천히 → 빠르게 → 천천히 |
ease-in |
오목 ↗ | 출발 가속 (이번 코드) |
ease-out |
볼록 ↗ | 도착 감속 |
ease-in-out |
S자 | 출발 가속 + 도착 감속 |
cubic-bezier(...) |
커스텀 | 4점 직접 지정 |
※ 자연스러움이 필요하면
ease-out이 가장 인간적인 느낌이다. 마우스 이탈 같은 "끝나는" 동작에 잘 어울림. ease-in은 "사라지는" 동작에 어울린다.4 270deg — 어디로 회전하나?
시계방향 270도가 시각적으로는 반시계 90도
rotate(270deg)는 시계방향으로 ¾바퀴를 돈다. 도착 지점만 보면 rotate(-90deg)(반시계 90도)와 같은 위치지만, 도는 방향이 반대라 transition 동안의 모습이 다르다.
rotate(270deg) → 시계방향 ¾바퀴 (오른쪽으로 빙 돌아감) rotate(-90deg) → 반시계 ¼바퀴 (왼쪽으로 짧게) 도착 위치는 같지만 보이는 움직임이 다름
5 호버에서 작아지는 코드 흐름
1
0초 (호버 진입)200x200 빨강 정사각형, 회전 0deg
2
0~0.5초 (ease-in 초반)거의 안 움직임 — 변화량 10% 정도
3
0.5~1.5초속도가 붙어 색도 빨리 변하고 회전도 진행
4
1.5~2초 (마무리)변화 속도가 최고조 — 마지막 순간에 정착
5
2초100x100 코랄, rotate(270deg) 완성
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 단축형에서 시간 단위 빠뜨림 (그냥 2) | 전체가 무시되어 즉시 변환 | 2s로 단위 명시 |
| delay와 duration 순서 헷갈림 | 의도치 않은 지연 적용 | 처음 등장하는 시간이 duration, 두 번째가 delay |
| :hover에 transition 작성 | 되돌아갈 때 점프 | 기본 셀렉터에 작성 |
| all로 무거운 속성까지 보간 | 큰 페이지에서 끊김 | 특정 속성만 명시 |
| 같은 요소에 두 번 transition | 나중 선언이 앞을 덮어씀 | 한 번에 콤마로 묶음 |
7 풀어 쓴 형태와 비교
단축형 (이번 코드)
transition: 2s ease-in;풀어 쓴 형태
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 0s;두 형태는 완전히 동일하게 작동한다. 단축형은 단순히 4줄을 1줄로 줄인 것뿐이다.
핵심 한 줄 요약
transitionproperty duration timing delay 단축 속성
2s ease-in2초 동안 / 천천히 출발해 끝에 가속
생략된 property기본값 all → 모든 속성에 적용
생략된 delay기본값 0s → 즉시 시작
270deg시계방향 ¾바퀴 — 도착은 -90deg와 동일
timing 키워드linear · ease · ease-in/out · cubic-bezier
실무 권장큰 컴포넌트는 all 대신 속성 명시
Tags
#transition #단축형 #transition-shorthand #ease-in #ease-out #ease-in-out #linear #cubic-bezier #transition-delay #all #transform #rotate #CSS3 #인터랙션 #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
transition, 단축형, transition-shorthand, ease-in, ease-out, ease-in-out, linear, cubic-bezier, transition-delay, all, transform, rotate, CSS3, 인터랙션, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS transition-timing-function — ease · linear · ease-in/out 비교 (0) | 2026.06.09 |
|---|---|
| CSS transform 함수 합성 — scale · perspective · rotateX 한 줄에 (0) | 2026.06.08 |
| CSS transition 여러 속성 동시 변환 — 색상·회전·크기 한꺼번에 (0) | 2026.06.08 |
| CSS transition 기초 — transition-property · transition-duration 완전 정리 (0) | 2026.06.05 |
| CSS3 animation — 2개 keyframes 동시 + 3D 회전 완전 정리 (0) | 2026.06.05 |
댓글