스킬 자체의 표현으로
이것은 감사가 아닌 구축 스킬입니다. 모션에 대한 요청을 엄격한 리뷰를 통과할 구현으로 전환하며, 고정된 순서로 작동합니다 — 애초에 애니메이션을 넣어야 하는지, 목적, 도구, 속성, 곡선과 지속 시간, 중단, 종료 — 그런 다음 코드를 작성합니다.
선택지 메뉴가 아니라 결정 자체를 원하는 디자이너와 개발자를 위한 것입니다. 세부 사항은 엄격한 표에서 나옵니다: 빈도 등급, transform과 opacity만 사용, 이름이 지정된 cubic-bezier 곡선, 요소별 지속 시간 범위, 그리고 애니메이션과 함께 제공되는 reduced-motion 및 hover 게이팅입니다. 코드베이스를 감사하거나 diff를 비평하려면 자매 스킬을 사용하십시오.
작동 방식
- 01빈도를 먼저 확인합니다
첫 단계에서 코드가 존재하기도 전에 작업이 끝날 수 있습니다: 하루에 100회 이상 열리는 것, 또는 키보드 단축키로 실행되는 것은 애니메이션을 전혀 넣지 않습니다.
- 02목적을 한 단어로 명시합니다
목적이 없으면 애니메이션도 없습니다. 사용자가 항상 보는 요소에 대해 그냥 멋져 보인다는 이유로 요청하는 것은 구축이 아니라 중단할 이유입니다.
- 03작동하는 가장 저렴한 도구를 선택합니다
도구 표를 따라 내려가다가 처음으로 맞는 것에서 멈춥니다: CSS transition, @starting-style, CSS animation, WAAPI, Motion.
- 04속성을 제한합니다
Transform과 opacity는 레이아웃과 페인트를 건너뛰고 GPU에서 실행되기 때문에 작업을 처리합니다. clip-path는 허용된 네 번째 속성이며, height 애니메이션은 아코디언에만 용인됩니다.
- 05표에서 곡선과 지속 시간을 고정합니다
진입과 퇴장은 ease-out, 화면 내 이동은 ease-in-out, hover와 색상 변화는 ease, 지속적인 움직임은 linear, 기본값은 ease-out입니다.
- 06중단과 종료를 계획합니다
빠르게 재트리거되는 요소는 transition을 사용하고, 제스처는 spring을 사용하며, 종료는 진입을 반영하여 스와이프로 닫기가 명확하게 읽히도록 합니다.