Intro
웹에서 동적인 모션을 보여주는 방법은 JS를 통한 방법도 있지만 CSS를 통해서도 간단한 형태 변화나 애니메이션을 구현할 수 있다. Transform 속성을 통한 다양한 형태 변환과 위치 이동, transition과 animation 속성을 이용한 애니메이션의 구현을 알아본다.
Transform
객체의 형태를 변환하는 속성. Reflow 과정이 생략되고 하드웨어 가속(GPU 사용)을 사용해서 성능 최적화에 적합하다는 이점이 있다. Reflow와 Repaint는 될 수 있으면 줄여서 브라우저 최적화를 해주는 편이 좋다.
💡
Reflow? 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스. 문서의 일부 또는 전체를 다시 렌더링하는 데 사용된다. 개발자는 항상 브라우저의 최적화를 염두에 두어야하고 리플로우의 최소화는 이에 분명 도움이 된다. Repaint? 리플로우 과정이 끝나면 브라우저에 다시 그려주는 웹브라우저 프로세스.
형태 속성
scale();
scaleX();
rotateX(deg);
skew(deg); 뒤틀기
위치 속성
translate(x, y)
기준점 변경 속성
transform-origin: center; *
transform-origin: 50% 50%; *
Animation
개발자 도구에서 딜레이 등 세부 속성 확인할 수 있음.
- transition: 0; *
- @keyframes 이름 {0% {}
}
transform: translateY(-30%)
- 100% {
- transform: translateY(180deg)
}
animation: 이름 infinite 1s
Uploaded by
N2T