Skip to content

CSS Transition과 CSS Animation

박수정 edited this page Sep 3, 2024 · 4 revisions

image

CSS Animation

image

레이어 요소에 영향을 미치는 속성

  • GPU 가속을 활용할 수 있어 성능에 긍정적인 영향
  • 레이아웃 재계산 없이 요소의 시각적 표현만 변경하기 때문에 애니메이션 시 부드러운 전환을 제공

예시

  • 투명도 - opacity
  • 이동, 회전, 크기 변경, 기울임 - transform(translate, rotate, scale)

레이아웃 재계산이 필요한 속성

  • 레이아웃이나 페인트 단계를 트리거할 수 있어 성능에 부정적인 영향
  • 요소의 위치나 크기를 변경할 때 레이아웃을 다시 계산해야 하기 때문에 CPU 부하가 증가

예시

  • 위치 - top, left, right, bottom
  • 크기 - width, height
  • 간격 - margin, padding
Clone this wiki locally