CSS3 transition 활용

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

---

학습 목표

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

핵심 개념

• CSS3 transition
• CSS3 transform

학습하기

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

transition 을 이용한 방법입니다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있습니다. 특히 모바일 웹에서는 transform을 사용한 element의 조작을 많이 구현합니다. https://robots.thoughtbot.com/transitions-and-transforms

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

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

• transform : translateXX();
• transform : scale();
• transform : rotate();
• opacity https://d2.naver.com/helloworld/2061385

생각해보기

1. 특정 엘리먼트를 만들고, 그 엘리먼트에 transition 속성을 주고, hover했을 때 좌측 상단에서, 우측 하단으로 움직이는 animation을 만들어보세요.
2. vendor prefix가 무엇이고, 왜 필요한지 알아봅니다.