Motion

CDS의 모션은 codexy-note chat-animations를 승계했다. --cds-ease-standard가 모든 step-in·fade·collapse의 기본 이징이며, chat 토큰 묶음의 --cds-chat-easing은 동일 값(cubic-bezier(0.23, 1, 0.32, 1))을 같은 의도로 정의해 둔 별칭이다.

Duration · Easing

Duration

--cds-duration-instant80mstooltip 등장 등

--cds-duration-fast150mshover/focus 색 변경

--cds-duration-normal200ms기본 transition

--cds-duration-slow300msfade-collapse

--cds-duration-slower450msstep-in 기본

Easing

--cds-ease-linearlinear

--cds-ease-standardcubic-bezier(0.23, 1, 0.32, 1)★ 기본

--cds-ease-incubic-bezier(0.4, 0, 1, 1)

--cds-ease-outcubic-bezier(0, 0, 0.2, 1)

--cds-ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

--cds-ease-springcubic-bezier(0.34, 1.56, 0.64, 1)

Transition 프리셋

자주 쓰는 조합은 --cds-transition-*로 묶여 있다.

토큰	정의
`--cds-transition-color`	`color duration-fast ease-standard`
`--cds-transition-bg`	`background-color duration-fast ease-standard`
`--cds-transition-transform`	`transform duration-normal ease-standard`
`--cds-transition-opacity`	`opacity duration-normal ease-standard`
`--cds-transition-all`	`all duration-normal ease-standard`

Keyframe 데모

각 패널의 재생 버튼으로 트리거. cds-fade-in-up, cds-fade-in-card, cds-fade-collapse는 한 번만, 나머지는 루프 애니메이션.

@keyframes cds-fade-in-upduration-slower (450ms)

메시지 6px step-in — 채팅 말풍선 기본

.cds-animate-step-in

step-in

@keyframes cds-fade-in-card500ms

카드 10px 등장 (500ms)

.cds-animate-card-in

card

@keyframes cds-fade-collapseduration-normal (200ms)

섹션 접기 (max-height → 0). --cds-collapse-from 로 시작 높이 제어

접히는 섹션

@keyframes cds-dot-pulse1.4s loop

단일 점 펄스 (scale 0.85↔1, opacity 0.5↔1)

.cds-animate-dot-pulse

@keyframes cds-dot-ripple1.6s loop

Agent 상태 pulse — idle dot 주변 ripple

@keyframes cds-shimmer1.6s loop

스켈레톤 로더 (1.6s linear 루프)

.cds-animate-shimmer

Framer Motion Preset

@tendtoyj/cds-core/motion 에서 variants로 export:

import { motion } from "framer-motion";
import { cdsStepIn, cdsCardIn } from "@tendtoyj/cds-core/motion";

<motion.div variants={cdsStepIn} initial="hidden" animate="visible" />

접근성

OS의 "동작 줄이기" 설정(prefers-reduced-motion: reduce)이 켜져 있으면 .cds-animate-* 클래스의 애니메이션은 0.01ms로 단축된다. 사용자 설정이 우선이므로 !important로 덮어쓰는 것이 맞다.

@media (prefers-reduced-motion: reduce) {
  .cds-animate-step-in,
  .cds-animate-card-in,
  .cds-animate-dot-pulse,
  .cds-animate-shimmer {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}