-
Notifications
You must be signed in to change notification settings - Fork 0
CSS Transition과 CSS Animation
박수정 edited this page Sep 3, 2024
·
4 revisions
- GPU 가속을 활용할 수 있어 성능에 긍정적인 영향
- 레이아웃 재계산 없이 요소의 시각적 표현만 변경하기 때문에 애니메이션 시 부드러운 전환을 제공
- 투명도 -
opacity
- 이동, 회전, 크기 변경, 기울임 -
transform
(translate, rotate, scale)
- 레이아웃이나 페인트 단계를 트리거할 수 있어 성능에 부정적인 영향
- 요소의 위치나 크기를 변경할 때 레이아웃을 다시 계산해야 하기 때문에 CPU 부하가 증가
- 위치 -
top
,left
,right
,bottom
- 크기 -
width
,height
- 간격 -
margin
,padding