반응형
DOM/CSS3
-
CSS 변환과 애니메이션 - 인터랙티브 웹 개발 | 1분코딩DOM/CSS3 2020. 4. 20. 20:56
1. Transform # CSS Transform은 하드웨어 가속을 이용해서 성능이 좋다 : 어떤 태그를 absolute 후 left로 이동하는 것 보다 translateX()를 이용하는 것이 훨씬 부드럽게 움직인다. * 하드웨어 가속을 이용한다는 것은 GPU를 사용한다. # CSS Transform은 브라우저가 지오메트릭을 다시 편성하는 과정(Reflow)에서 CSS 대상만 크기나 위치를 계산해서 렌더링하기 때문에 연산할 것도 적고 성능도 더 좋다. 2. Transition : 값이 수치로 표현되는 속성이 값의 변화(수치로)가 있을 때 변화과정을 애니메이션으로 만들어준다. # transition-property : 속성 # transition-duration : 재생시간 # transition-del..