[CSS] 트랜지션(Transition) 애니메이션과 성능

이번 포스팅에서는 [CSS 모션] 파트의 세부 주제인 상태 변화를 부드럽게 연결하는 Transition 기법에 대하여 상세히 알아보겠습니다.

1. 모든 것(all)을 애니메이션 하지 마라

간편하다는 이유로 transition: all 0.3s;를 남발하면, 색상뿐만 아니라 브라우저 렌더링에 부담을 주는 layout 속성들까지 전부 계산되어 성능이 떨어집니다. 변하는 속성만 정확히 명시하는 것이 노하우입니다.

.btn {
  background-color: #3b82f6;
  color: #fff;
  transform: translateY(0);
  
  /* 색상과 transform 속성에만 각각 트랜지션을 분리 적용! */
  transition: background-color 0.2s ease, transform 0.2s ease-out;
}

.btn:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
}

2. 찰진 손맛, cubic-bezier() 커스텀 타이밍

기본 제공되는 ease-in-out은 밋밋합니다. 통통 튀는(Bouncy) 효과나 쫀득한 모션을 원한다면 베지어 곡선을 직접 조작하세요.

.modal {
  /* 튀어나갔다가 다시 제자리로 돌아오는 통통 튀는 효과 */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

---

지금까지 트랜지션 최적화와 cubic-bezier 타이밍 함수에 대해 살펴보았습니다. 다음 시간에는 조금 더 복잡한 키프레임 애니메이션에 대해 알아보겠습니다.