Animate

/impeccable animate

Good fit

• 인터페이스가 무생명하거나 상태 전환이 갑작스럽습니다.
• 로딩, 피드백, 전환에 무슨 일이 일어나는지 설명하는 모션이 필요합니다.
• reduced-motion 대체를 포함한 규율 있는 애니메이션을 원합니다.

사용 시기

/impeccable animate은 무생명한 인터페이스, 상태 변화가 즉각적이고 충격적인 곳, 로딩이 그냥 나타나는 곳, 클릭이 등록되었는지 사용자가 결코 확신하지 못하는 곳을 위한 것입니다. 무슨 일이 일어나는지 전달하는 작은 모션을 추가할 때 사용하세요: 등장, 퇴장, 피드백, 상태 간 전환.

에너지를 위해 바운스나 탄성 스프링을 추가하는 데 사용하지 마세요. 그것은 장식이며, 이 스킬은 그것을 주지 않을 것입니다.

작동 방식

스킬은 모션의 이점이 있는 정적 순간을 식별한 다음 엄격한 규율로 적용합니다:

1. 등장과 퇴장: 요소가 200~300ms 페이드와 미묘한 Y 또는 scale로 나타나고 사라집니다. 레이아웃 속성은 절대 사용하지 않습니다.
2. 상태 피드백: hover, active, focus, loading, success가 모두 갑작스러운 교체 대신 모션으로 전달됩니다.
3. 뷰 간 전환: 의미 있는 곳에서는 shared-element 전환, 그 외에는 fade-through.
4. 진행 및 로딩: 스켈레톤 화면, 확정 진행 막대, “아직 작업 중”이라고 말하는 모션.
5. Reduced motion: 모든 애니메이션에 prefers-reduced-motion 대체가 있습니다.

이징은 항상 지수형(ease-out-quart, quint, 또는 expo)입니다. 실제 물체는 부드럽게 감속하기 때문입니다. 바운스 없음, 탄성 없음, 진행 표시기 외에는 linear 없음.

스킬은 transform과 opacity만 애니메이션합니다. width, height, top, left를 애니메이션하고 있다면 잘못하고 있는 것입니다. 높이 전환에는 grid-template-rows를 사용하세요.

직접 해보기

/impeccable animate the sign-up flow

일반적 추가:

• 이메일 입력에 focus-visible에서 포커스 글로우(opacity + shadow, 180ms)
• 제출 버튼이 로딩 상태에서 옆에 별도 스피너가 아닌 자체 내부에 스피너 표시
• 성공 화면이 opacity + translateY(8px), 260ms, ease-out-quart로 등장
• 에러 메시지가 grid-template-rows(height 아님)로 아래로 슬라이드, 220ms
• 모든 전환에 @media (prefers-reduced-motion: reduce) 대체

주의 사항

• “애니메이션 더” 요청하기. Animate은 다이얼이 아닙니다. 모션이 전달하는 곳에 추가하지, 모든 곳에 추가하지 않습니다.
• reduced-motion 대체 제거하기. 스킬이 자동으로 추가합니다. 접근성을 위해 협상 불가합니다.

Related commands

• Delight