Animations & Motion

IBee 인터랙션 가이드 - 트랜지션, 애니메이션, 이징 함수

Base Transition

모든 인터랙션의 기본 트랜지션. 200ms + cubic-bezier(0.4, 0, 0.2, 1) 사용.

Token Value Usage
--transition 200ms cubic-bezier(0.4, 0, 0.2, 1) 버튼, 호버, 포커스 등 모든 기본 인터랙션
--transition-fast 150ms ease-out 즉각적인 피드백 (클릭, 토글)
--transition-slow 300ms ease-out 패널 열림/닫힘, 모달

Easing Functions

linear
ease
ease-out
cubic-bezier
Easing Comparison
IBee는 cubic-bezier(0.4, 0, 0.2, 1)을 기본으로 사용합니다. 자연스러운 가속/감속 효과.

Entry Animations

Fade Up
fadeUp
메시지 버블, 카드 등장 시 사용
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } animation: fadeUp 0.5s ease-out;
Scale
scaleIn
모달, 팝오버 등장
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } animation: scaleIn 0.3s ease-out;
Slide
slideRight
사이드바 아이템 등장
@keyframes slideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } animation: slideRight 0.4s ease-out;
⏳

Loading & Streaming

cursorBlink
SSE 스트리밍 중 타이핑 커서
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } animation: cursorBlink 0.8s ease-in-out infinite;
thinkingPulse
AI 생각 중 인디케이터
@keyframes thinkingPulse { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } animation: thinkingPulse 1.4s ease-in-out infinite; animation-delay: 0.2s; /* stagger */
shimmer
스켈레톤 로딩
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } animation: shimmer 1.5s infinite;
응답 생성 중...
statusPulse
상태 표시 펄스
@keyframes statusPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } } animation: statusPulse 2s ease-in-out infinite;

Hover & Interaction

Hover me
hover-lift
카드 호버 시 들어올림 효과
transition: all 0.2s ease; :hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
button-press
버튼 클릭 피드백
transition: all 0.2s ease; :hover { transform: scale(1.02); } :active { transform: scale(0.98); }

Page Transitions

Transition Duration Easing Usage
Panel slide 200ms cubic-bezier(0.4, 0, 0.2, 1) Excel 패널 열림/닫힘
Screen fade 300ms ease-out 화면 전환
Message entry 300ms ease-out 새 메시지 등장
Modal appear 200ms ease-out 모달/다이얼로그
Toast slide 250ms ease-out 토스트 알림

Animation Guidelines

Do's ✅

  • 200ms를 기본 duration으로 사용
  • cubic-bezier(0.4, 0, 0.2, 1) 이징 함수 사용
  • 목적이 있는 애니메이션만 사용 (피드백, 상태 변화 표시)
  • 스트리밍 커서는 0.8초 주기로 깜빡임
  • 호버 효과는 subtle하게 (translateY 4px 이하)

Don'ts ❌

  • 500ms 이상의 긴 애니메이션 (사용자 대기 유발)
  • 과도한 bounce, elastic 효과
  • 의미 없는 장식용 애니메이션
  • 동시에 여러 요소가 애니메이션되는 것
  • prefers-reduced-motion 무시