transition
Adds smooth animations to property changes. Core of interactions like hover effects. tall200msease is used in nearly every hover pattern.
Class List
| Class | CSS | Description |
|---|---|---|
tnone | transition: none | Disable transition |
tpall | transition-property: all | Apply to all properties |
tpnone | transition-property: none | Apply to no properties |
tfe | transition-timing-function: ease | Default easing |
tfei | transition-timing-function: ease-in | Slow start |
tfeo | transition-timing-function: ease-out | Slow end |
tfeio | transition-timing-function: ease-in-out | Slow start and end |
tfl | transition-timing-function: linear | Constant speed |
tall200msease | transition: all 200ms ease | Most common transition |
tall300msease | transition: all 300ms ease | Slightly slower transition |
tall300ms | transition: all 300ms | 300ms default timing |
topacity500ms | transition: opacity 500ms | Opacity only transition |
Shorthand Pattern Analysis
Transition shorthand: t + property + duration + timing function.
t{property}{duration}{timing}| Part | Role | Example |
|---|---|---|
t | transition 접두사 | t... |
{property} | 적용 대상 속성 | all, opacity, transform |
{duration} | 전환 시간 | 200ms, 300ms, 500ms |
{timing} | 타이밍 함수 (선택) | ease, easein, linear |
tall200msease
=
t(transition)
+
all(all properties)
+
200ms(duration)
+
ease(timing)
Timing Function Comparison
Hover over each box to see timing function differences.
ease — tall300msease
Default. Smooth start and end (most natural)
ease-in — tall300mseasein
Slow start, fast end
ease-out — tall300mseaseout
Fast start, slow end
linear — tall300mslinear
Constant speed. For progress bars
Common Transitions
| Class | CSS | Usage |
|---|---|---|
tall200msease | transition: all 200ms ease | 버튼 호버, 링크 색상 변경 (가장 많이 사용) |
tall300msease | transition: all 300ms ease | 카드 호버, 약간 느린 전환이 필요할 때 |
tall300ms | transition: all 300ms | 기본 타이밍 (ease가 브라우저 기본) |
topacity500ms | transition: opacity 500ms | 페이드 인/아웃 효과 |
<!-- Most common pattern: button hover -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF tall200msease py8px px16px br8px bn cp">
Smooth hover
</button>
<!-- Slightly slower card hover -->
<div class="bg1E1E2E hover-bg27272A tall300msease p2rem br8px cp">
Card Content
</div>
<!-- Transition opacity only -->
<div class="o50 hover-o100 topacity500ms cp">
Gradually becomes visible
</div>Interactive Demo
Hover to see each transition effect.
Background color change
bg6366F1 hover-bg4F46E5 tall200mseaseOpacity change
o50 hover-o100 topacity500msShadow appears
bsn hover-bs... tall200mseaseTransition Property
Specifies which properties to transition individually.
| Class | CSS |
|---|---|
tpall | transition-property: all |
tpnone | transition-property: none |
Transition Timing Function
Specifies the acceleration/deceleration curve.
| Class | CSS | Description |
|---|---|---|
tfe | transition-timing-function: ease | Default. Start/end deceleration (most natural for UI) |
tfei | transition-timing-function: ease-in | Slow start. Elements exiting screen |
tfeo | transition-timing-function: ease-out | Slow end. Elements entering screen |
tfeio | transition-timing-function: ease-in-out | Slow start and end. Round-trip animation |
tfl | transition-timing-function: linear | Constant speed. Progress bars, loading |
Common Patterns
Practical patterns combining transitions and hover.
| Pattern | Usage |
|---|---|
bg000000 hover-bg333333 tall200msease | Button/link hover background transition |
o0 hover-o100 tall300msease | Fade-in effect |
bsn hover-bs0px4px12px0px6366F1 tall200msease | Shadow appears on hover |
cFFFFFF hover-c6366F1 tall200msease | text color transition |
bg1E1E2E hover-bg27272A b1pxsolid27272A hover-bc6366F1 tall200msease | Card hover (background + border) |
<!-- Button hover (most common pattern) -->
<button class="bg000000 hover-bg333333 cFFFFFF tall200msease cp py8px px16px br8px bn">
Button
</button>
<!-- Card hover (background + border simultaneous transition) -->
<div class="bg1E1E2E hover-bg27272A b1pxsolid27272A hover-bc6366F1 tall200msease p2rem br8px cp">
<h3 class="cFAFAFA mb8px">Card Title</h3>
<p class="c71717A fs14px">Background and border change simultaneously on hover</p>
</div>
<!-- Fade in -->
<div class="o0 hover-o100 tall300msease">
Appears on mouse hover
</div>
<!-- Navigation link -->
<a class="c71717A hover-cFFFFFF tall200msease tdn cp">
Smooth color transition
</a>Tips & Notes
tall200msease is versatile
tall200msease is the most versatile transition. Sufficient for most interactions.
Avoid layout properties
width/height transitions cause reflow. Use transform/opacity instead.
ease vs linear
ease is smooth and natural for UI. linear is constant speed for progress bars/loading.
Transition specific properties only
tall transitions all properties. For performance, use specific like topacity500ms.