transition
속성 변화에 부드러운 애니메이션을 추가합니다. 호버 효과, 상태 전환 등 인터랙션의 핵심이며, tall200msease는 거의 모든 호버 패턴에 사용됩니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
tnone | transition: none | 트랜지션 비활성화 |
tpall | transition-property: all | 모든 속성에 적용 |
tpnone | transition-property: none | 어떤 속성에도 미적용 |
tfe | transition-timing-function: ease | 기본 가감속 |
tfei | transition-timing-function: ease-in | 느리게 시작 |
tfeo | transition-timing-function: ease-out | 느리게 끝남 |
tfeio | transition-timing-function: ease-in-out | 느리게 시작하고 끝남 |
tfl | transition-timing-function: linear | 일정한 속도 |
tall200msease | transition: all 200ms ease | 가장 많이 쓰는 트랜지션 |
tall300msease | transition: all 300ms ease | 약간 느린 트랜지션 |
tall300ms | transition: all 300ms | 300ms 기본 타이밍 |
topacity500ms | transition: opacity 500ms | 투명도만 전환 |
단축 패턴 분석
transition 단축 클래스는 t + 속성 + 시간 + 타이밍 함수로 조합됩니다.
t{property}{duration}{timing}| 부분 | 역할 | 예시 |
|---|---|---|
t | transition 접두사 | t... |
{property} | 적용 대상 속성 | all, opacity, transform |
{duration} | 전환 시간 | 200ms, 300ms, 500ms |
{timing} | 타이밍 함수 (선택) | ease, easein, linear |
tall200msease=t(transition)+all(모든 속성)+200ms(시간)+ease(타이밍)
타이밍 함수 비교
각 박스 위에 마우스를 올려 다른 타이밍 함수의 차이를 확인하세요.
ease — tall300msease
기본값. 시작과 끝이 부드러움 (가장 자연스러움)
ease-in — tall300mseasein
느리게 시작, 빠르게 끝남
ease-out — tall300mseaseout
빠르게 시작, 느리게 끝남
linear — tall300mslinear
일정한 속도. 프로그레스 바에 적합
자주 쓰는 트랜지션
| 클래스 | CSS | 용도 |
|---|---|---|
tall200msease | transition: all 200ms ease | 버튼 호버, 링크 색상 변경 (가장 많이 사용) |
tall300msease | transition: all 300ms ease | 카드 호버, 약간 느린 전환이 필요할 때 |
tall300ms | transition: all 300ms | 기본 타이밍 (ease가 브라우저 기본) |
topacity500ms | transition: opacity 500ms | 페이드 인/아웃 효과 |
<!-- 가장 많이 쓰는 패턴: 버튼 호버 -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF tall200msease py8px px16px br8px bn cp">
부드러운 호버
</button>
<!-- 약간 느린 카드 호버 -->
<div class="bg1E1E2E hover-bg27272A tall300msease p2rem br8px cp">
카드 콘텐츠
</div>
<!-- 투명도만 전환 -->
<div class="o50 hover-o100 topacity500ms cp">
서서히 선명해짐
</div>인터랙티브 데모
호버하여 각 트랜지션 효과를 직접 확인하세요.
배경색 변경
bg6366F1 hover-bg4F46E5 tall200msease투명도 변경
o50 hover-o100 topacity500ms그림자 나타남
bsn hover-bs... tall200mseaseTransition Property
어떤 속성에 트랜지션을 적용할지 개별적으로 지정합니다.
| 클래스 | CSS |
|---|---|
tpall | transition-property: all |
tpnone | transition-property: none |
Transition Timing Function
애니메이션의 가속/감속 곡선을 지정합니다.
| 클래스 | CSS | 설명 |
|---|---|---|
tfe | transition-timing-function: ease | 기본값. 시작/끝 감속 (UI에 가장 자연스러움) |
tfei | transition-timing-function: ease-in | 느리게 시작. 요소가 화면 밖으로 나갈 때 |
tfeo | transition-timing-function: ease-out | 느리게 끝남. 요소가 화면에 들어올 때 |
tfeio | transition-timing-function: ease-in-out | 느리게 시작하고 끝남. 왕복 애니메이션 |
tfl | transition-timing-function: linear | 일정한 속도. 프로그레스 바, 로딩 |
자주 쓰는 패턴
트랜지션과 호버를 조합한 실무 패턴입니다.
| 패턴 | 용도 |
|---|---|
bg000000 hover-bg333333 tall200msease | 버튼/링크 호버 배경색 전환 |
o0 hover-o100 tall300msease | 페이드 인 효과 |
bsn hover-bs0px4px12px0px6366F1 tall200msease | 호버 시 그림자 나타남 |
cFFFFFF hover-c6366F1 tall200msease | 텍스트 색상 전환 |
bg1E1E2E hover-bg27272A b1pxsolid27272A hover-bc6366F1 tall200msease | 카드 호버 (배경 + 보더) |
<!-- 버튼 호버 (가장 흔한 패턴) -->
<button class="bg000000 hover-bg333333 cFFFFFF tall200msease cp py8px px16px br8px bn">
버튼
</button>
<!-- 카드 호버 (배경 + 보더 동시 전환) -->
<div class="bg1E1E2E hover-bg27272A b1pxsolid27272A hover-bc6366F1 tall200msease p2rem br8px cp">
<h3 class="cFAFAFA mb8px">카드 제목</h3>
<p class="c71717A fs14px">호버 시 배경과 보더가 동시에 변합니다</p>
</div>
<!-- 페이드 인 -->
<div class="o0 hover-o100 tall300msease">
마우스를 올리면 나타남
</div>
<!-- 네비게이션 링크 -->
<a class="c71717A hover-cFFFFFF tall200msease tdn cp">
부드러운 색상 전환
</a>팁 & 주의사항
tall200msease가 만능
tall200msease는 가장 범용적인 트랜지션입니다. 버튼 호버, 색상 변경, 그림자 등 대부분의 인터랙션에 이 하나만 사용해도 충분합니다.
레이아웃 속성은 피하기
width, height 트랜지션은 리플로우를 발생시켜 성능이 좋지 않습니다. 대신 transform, opacity를 사용하세요.
ease vs linear
ease는 시작과 끝이 부드러워 UI 인터랙션에 자연스럽습니다. linear는 일정한 속도로, 프로그레스 바나 로딩 애니메이션에 적합합니다.
특정 속성만 전환하기
tall은 모든 속성에 트랜지션을 겁니다. 성능이 중요하면 topacity500ms처럼 특정 속성만 지정하세요.