# 더 나은 CSS 트랜지션 & 애니메이션을 위한 팁들

> Clean Markdown view of GeekNews topic #8741. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=8741](https://news.hada.io/topic?id=8741)
- GeekNews Markdown: [https://news.hada.io/topic/8741.md](https://news.hada.io/topic/8741.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-03-20T10:45:01+09:00
- Updated: 2023-03-20T10:45:01+09:00
- Original source: [joshcollinsworth.com](https://joshcollinsworth.com/blog/great-transitions)
- Points: 27
- Comments: 0

## Topic Body

### 생각하는 것보다 더 짧게 할 것  
- 단일 트랜지션은 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"을 선호하는지 지정 가능   
- 미디어 쿼리를 이용하거나 자바스크립트를 통해 이 값을 인식하고, 맞게 대응 가능

## Comments



_No public comments on this page._