애니메이션 최적화

화려하다고 좋은건 아니다

프론트 개발을 하다보면 자꾸 욕심이 난다. 더 예쁘게, 더 화려하게, 더 있어보이게
이렇게 모든것에 애니메이션을 무분별하게 사용하게 되었을 경우, 오히려 사용자에게 불편한 경험을 줄 수 있다.
가령 개발자 브라우저 환경에서는 부드럽게 잘 보이지만 사용자 브라우저 환경에서는 뚝.뚝 끊기는 경험을 할 수도 있다.

그래서 애니메이션 효과는 되도록이면 자제하고 사용해도 성능상에 큰 영향을 끼치지 않는 곳이나 사용자 경험에 큰 효과를 줄 수 있는 곳에만 사용되어야 한다.
그리고 사용할 떄도 페이지의 레이아웃 또는 페인팅의 영향을 끼치는 속성에 대해서는 사용하지 말아야 한다.

추천 속성

transform, opacity

비추천 속성

transform과 opacity를 제외한 모든 속성 (width, height, padding, margin, position 등등)

더 좋은 방법이 있다면 댓글에 알려주세요!

제발