CSS Transition과 CSS Animation

CSS Animation

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

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

예시

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

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

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

예시

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