CSS3 transition 활용

• 들어가기 전에

애니메이션 효과는 부드러운 UX를 제공하는 것이 좋다. 버벅거리는 효과는 오히려 답답하고 느린 웹사이트로 인식될 수 있다. 최적의 방법을 찾아서 적용해야 할텐데, 이번 장에서 다루는 CSS3 효과가 그 답이라고 해도 될 것 같다.

• 학습 목표

1. CSS3 transition 속성 기반 웹 애니메이션 구현방법을 이해한다.

• 핵심 개념

- CSS3 transition

- CSS3 transform

• CSS 기법으로 애니메이션 구현

- transition을 이용한 방법이다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있다. 특히 모바일 웹에서는 transform을 사용한 element의 조작을 많이 구현한다.

- https://thoughtbot.com/blog/transitions-and-transforms

• 더 빠른 CSS3 애니메이션 관련 속성들

GPU 가속을 이용하는 속성을 사용하면 애니메이션 처리가 빠르다.

- transform : translateXX();

- transform : scale();

- transform : rotate();

- opacity

- https://d2.naver.com/helloworld/2061385