animation 등 움직임은 transform으로 주는게 좋다?🤔
막 css를 배웠을 초반에는 요소의 움직임을 대부분 margin, padding, top, left, right, bottom 으로 주곤 했다.
현재는 transform을 많이 사용하고 있지만, transform을 사용하면 어떤 점이 더 좋은걸까?
transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다.
본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 된다.
.box {
transform : rotate(10deg);
transform : translate(10px, 20px);
transform : scale(2);
transform : skew(30deg);
transform : rotate(10deg) translateX(30px);
}- rotate : 회전
- translate : 좌표이동
- scale : 확대축소
- skew : 비틀기
💡애니메이션에 더욱 효과적이다?
위와 같이 웹브라우저는 html & css를 2D 그래픽으로 바꿔줄 때 4가지 단계를 거쳐 적용되는데,
margin, padding, left, right, top, bottom(2단계 Layout에 해당하는 요소들) 등으로 애니메이션을 동작시키면 2단계부터 4단계까지 다시 렌더링해야한다.
이렇게되면 부담되고 애니메이션 속도도 느려질 수 있다.
그와 달리 transform으로 애니메이션을 동작시키면 4단계만 렌더링하면 되기때문에 부담이 덜하고 애니메이션을 빠르게 동작 시킬 수 있다.
✨will-change
성능 잡기① : will-change
.box {
will-change: transform;
}
/* will-change : 애니메이션줄 속성; */‘will-change → 바뀔 내용을 미리 렌더링해주는 속성’
애니메이션을 주는 요소(box)가 약간 느리게 동작할 때 쓰면 성능개선이 가능하다.
(애니메이션이 스무스하게 잘 된다면 안써도 됨, 버벅일 때 사용)
오히려 무분별하게 많이 쓰면 브라우저 자체가 더 느려질 수 있으니 주의
✨하드웨어 가속
성능 잡기② : 하드웨어 가속
*애니메이션이 너무 많아 CPU만으로 전부 연산이 불가능하다면 GPU의 도움을 받을 수도 있다.
.box {
transform: translate3d(0, 0, 0);
}transform : translate3d를 쓰면 3D 이동도 가능한데, 이 속성의 경우 GPU를 사용해서 연산하게 된다.
translate3d(0, 0, 0) → 3D 이동명령을 주고 뒤에 필요한 transform을 더 적용한다면 GPU를 이용해서 요소(box)가 가진 transform 속성들을 연산할 수 있다.
부담을 덜고싶을 때 사용할 것!👍
