Skip to content

CSS Transition과 CSS Animation

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

image

CSS Transition

CSS 속성들 중 주로 숫자로 값이 표현되는 속성들(색상 포함)의 값이 변할 때,
중간 과정을 애니메이션으로 만들어 주는 기능

💡 Transition은 자동으로 재생되지 않는다. 마우스를 올리든 특정 클래스가 추가되든, 어떤 액션이 있어야 실행된다.
페이지가 로드되고 자동으로 재생되는 걸 원한다면, 아래에 있는 CSS Animation을 사용.

💡 속성마다 따로 적용하고 싶다면, 다른 CSS 속성들과 마찬가지로 쉼표로 구분

속성

  • transition-property: Transition을 적용할 CSS 속성 이름
    기본값은 all로, 가능한 모든 속성에 Transition을 적용
  • transition-duration: Transition 효과를 지속(재생)하는 시간
    초(s) 또는 밀리초(ms) 단위
  • transition-delay: Transition이 시작되기 전 대기 시간
    초(s) 또는 밀리초(ms) 단위를 사용
  • transition-timing-function: 가속이나 감속을 적용해서, 애니메이션의 느낌, 텐션을 조정


CSS Animation

Transition과 마찬가지로 CSS 값의 변화에 따라 애니메이션 효과를 만들어 주는데 Transition보다 기능이 더 많다.
키프레임 개념이 있어서 애니메이션 중간에 원하는 지점에서 CSS에 변화를 줄 수 있고,
일시정지나 재생 등의 컨트롤도 가능하다.

image

속성

  • animation-name: 애니메이션의 이름. 원하는 곳에서 애니메이션을 사용할 때, 이 이름을 사용 @keyframes 원하는이름
  • animation-duration: 애니메이션을 지속(재생)하는 시간
    초(s) 또는 밀리초(ms) 단위를 사용
  • animation-delay: 애니메이션이 시작되기 전 대기 시간
    초(s) 또는 밀리초(ms) 단위를 사용
  • animation-timing-function: 가속이나 감속을 적용해서, 애니메이션의 느낌, 텐션을 조정
  • animation-iteration-count: 애니메이션의 반복 횟수를 숫자로 지정
    무한 반복을 원하면 infinite
  • animation-direction: 애니메이션의 재생 방향
    • normal 정방향 재생. 타임라인 0%(from)에서 100%(to) 방향으로
    • reverse 역방향 재생. 타임라인 100%(to)에서 0%(from) 방향으로
    • alternate 정방향, 역방향, 정방향, 역방향… 으로 번갈아 가면서 재생
    • alternate-reverse 역방향, 정방향, 역방향, 정방향… 으로 번갈아 가면서 재생
  • animation-fill-mode: 애니메이션이 재생되고 있지 않은 상태(시작 전, 후)에 어떤 스타일을 적용해줄 지 결정하는 속성
    • none 재생 전, 후 모두 CSS에 선언된 스타일이 적용.
    • forwards 재생 전에는 CSS에 선언된 스타일, 재생 후에는 타임라인의 100% 지점 스타일이 적용.
    • backwards 재생 전에는 타임라인의 0% 지점 스타일, 재생 후에는 CSS에 선언된 스타일이 적용.
    • both 재생 전에는 타임라인의 0% 지점 스타일, 재생 후에는 타임라인의 100% 지점 스타일이 적용.
  • animation-play-state: 애니메이션의 재생 상태
    running이 재생 중, paused는 일시 정지 상태

성능

Transition과 Animation을 사용할 때는 Transform과 Opacity 두 속성에만 적용하는 것이 성능상 바람직하다.
특히 이동은 left, top 등의 속성 대신, transform의 translate, translateX, translateY, translate3d를 사용

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

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

예시

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

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

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

예시

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