사용법
보이는 동안 반복 모션을 실행하며 동작 감소 설정도 존중해요.
LOOP
인터페이스
LoopAnimationProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "float" | "pulse" | "rotate" | "orbit" | float | 반복 모션 종류 |
| durationMs | number | 3000 | 반복 주기(ms) |
| delayMs | number | 0 | 시작 지연(ms) |
| paused | boolean | false | 애니메이션 일시 정지 |
| playWhenVisible | boolean | true | 보일 때만 재생 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
LoopAnimation 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { LoopAnimation } from "@goldtreedev/ui";