Animations (애니메이션)
iCignal의 애니메이션 시스템은 Foundation과 완전히 동일합니다.
Foundation 상속
iCignal은 Foundation의 Transition Duration과 Easing Functions를 모두 상속합니다.
Transition Duration
| 토큰 | 시간 | 사용 사례 |
|---|---|---|
| fast | 150ms | Hover, Focus, Small Changes |
| base | 200ms | Modal Open/Close, Dropdown (기본) |
| slow | 300ms | Slide Animation, Large Changes |
실전 예제
import { Button } from "@vortex/ui-icignal";
export default function Example() {
return (
<div>
{/* Button with hover animation */}
<Button
variant="primary"
className="transition-all duration-150 hover:scale-105"
>
Hover me (iCignal Blue)
</Button>
{/* Card with elevation animation */}
<div className="p-md bg-white rounded-lg shadow-md transition-shadow duration-200 hover:shadow-xl">
<h3 className="text-xl font-semibold text-text-primary">
Animated Card
</h3>
<p className="text-text-secondary mt-sm">Hover for elevation effect</p>
</div>
</div>
);
}다음 단계
Last updated on