생각하는 것보다 더 짧게 할 것
- 단일 트랜지션은 0.15~0.4초
- 너무 빠르다고 생각될 때까지 빠르게 한 다음 조금씩 줄이기
액션을 커브에 맞출 것
- 움직임은 색상만큼 주관적이지만, 그만큰 중요함
- 실제 세계의 움직임을 생각하고 비교할 것
가속과 감속
- 애니메이션이 부자연 스럽다면 갑자기 시작하거나 끝나기 때문
- 미미하더라도 cubic-bezier 커브에 easing-in/out을 추가하는 게 좋음
- 실제처럼 보이려면 "관성(Inertia)"도 좋음
적을수록 좋음
- 애니메이션 중에 엘리먼트가 더 많이 변경될 수록, 더 과도하게 보일 위험이 커짐
- 투명도가 0에서 1로 간다면 1대신 0.4를 시도해보기. 사이즈를 변경한다면 조금만 작은 크기에서 시작해보기
- 대부분의 경우 자기 자리로 찾아가는 애니메이션은 5~40픽셀 사이에서 움직여야함
브라우저 기본값은 피할 것
- 브라우저에는 linear, ease, ease-in, ease-out, ease-in-out 같은 커브가 내장
- 편하고 특정 상황에서는 유용하지만, 너무 일반적이어서 다 똑같아 보임 (마치 Bootstrap/Tailwind로 만든 사이트가 다 비슷해 보이는 것처럼)
- VS Code에 있는 cubic-bezier 커브의 자동 완성값을 사용해 볼 것
- 또는 브라우저 개발자 도구를 열고 커브 편집기를 사용해 볼 것
여러가지 속성, 여러가지 easing
- 항상 유용한 것은 아니지만, 여러개의 속성을 한번에 변경해야 할 때 (transform 과 opacity를 동시에)
- 같은 cubic-bezier 커브를 적용하면 괜찮게 보일때도 있지만, 실제로 안그럴 때가 있음
- transform에 잘 동작하는 커브도 fade에는 잘 안어울릴 수 있음
- 이럴때는 CSS 속성별로 서로 다른 easing을 선택하는게 좋음
- 속성별로 @keyframes 애니메이션을 나누거나, 여러개의 transition 선택 가능
- opacity 에는 linear, transform 에는 cubic-bezier(.5, 0, .5, 1)
엇갈린 지연 사용
- 여러개의 엘리먼트를 트랜지션할때 animation-delay 또는 transition-delay의 효과를 과소평가 하지 말 것
In은 나가고, Out은 들어감
- 이징 커브는 세가지 종류가 있음
- ease in (느리게 시작)
- ease out (느리게 끝남)
- in-out (가운데만 빠르고, 시작과 끝에선 느림)
- 트랜지션의 까다로운 점은, 종종 in 을 ease-out 하고 싶고, out 이 ease-in 되고 싶을 때가 있다는 것
- 하나가 나가고 하나가 들어오는 애니메이션은, 사용자 입장에선 하나의 전환으로 보이지만, 내부에선 두개의 전환임
- 나가는 것은 천천히 하고 싶으니까 ease-in이 필요하고, 들어오는 것은 ease-out 이 되어야 함
하드웨어 가속에 의존하기
- 모든 CSS 속성이 모든 장치 & 브라우저에서 원활히 동작하는 것은 아님
- 항상 하드웨어 가속 가능한 속성
- transform(모든 translate, scale, rotate 및 3D 버전까지)
- opacity
- 경우에 따라 하드웨어 가속 가능한 속성
- 특정 SVG 속성들
- filter (브라우저 및 필터에 따라)
- 캔버스 및 WebGL도 하드웨어 가속이 되지만 여기서는 다루지 않음
- 즉, 이동, 크기 조정, 회전 하려면 항상 CSS
tranform 속성을 사용할 것
- 뭘하든 엘리먼트의 크기나 위치를 직접 변경하지 말 것
- height, width, border, margin, padding 같이 페이지 레이아웃에 영향을 미치는 속성을 직접 변경하면 페이지 속도가 눈에 띄게 느려질 위험이 있음
필요시 will-change 사용하기
- 이론적으로는 애니메이션이 부드럽고 성능이 좋아야 하는데, 부자연스러워 보인다면 will-change 속성을 사용할 것
- 뭐가 변경될지 미리 알려주므로, 다른 계산을 건너 뛸 수 있음
보너스 : 사용자의 선호도를 존중하기
- 사용자는 기기 설정에서 "reduced motion"을 선호하는지 지정 가능
- 미디어 쿼리를 이용하거나 자바스크립트를 통해 이 값을 인식하고, 맞게 대응 가능