CSS 애니메이션

GIF

최대 256 색상을 지원하며 비 손실 압축 포맷으로 구현이 간편함
압축률이 낮아 이미지 용량이 크고, 브라우저 성능(fps) 저하 발생

MP4

손실 압축 포맷으로 용량이 적고 스트리밍 재생이 가능함
알파 채널이 지원되지 않아 배경색을 포함한 콘텐츠를 제작해야 함

CSS & JS

인터렉션 UI 애니메이션에 적합하고, 부드러운 애니메이션 제공
복잡하고 현란한 애니메이션 제작 어려움

LOTTIE

SVG 벡터 기반으로 선명하고 현란한 애니메이션 제작이 가능
After Effects 도구 사용으로 진입 장벽이 높음

Transition이란?

• Transition의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있음.
• CSS 속성인 Transition은 한 상태에서 다른 상태로 변형될 때 일정 시간 동안 변화는 과정을 말함.

특징

• 적용될 대상은 초기/종료 상태의 스타일과 Transition 속성 정의가 필요
• 애니메이션 발생을 위한 가상 선택자(:hover 등) 또는 js 방아쇠(Trigger)가 필요

Transition 5가지 속성

1. transition-property

• CSS 속성을 지정함
• 기본값 : all (모든 속성에 적용)

transition-property: none | all | property | initial | inherit;

/* 속성 1개 이상 적용 가능 */
transition-property: background-color, width;

2. transition-duration

• 실행 시간(필수)
• 기본값 : 0s

transition-duration: time | initial | inherit;

/* 초 단위(s), 밀리 초 단위(ms)단위로 적용 가능 */ 
transition-duration: .5s, 500ms; 

3. transition-timing-function

• 가속, 감속 설정
• 기본값 : ease

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

4. transition-delay

• 실행 지연 시간
• 기본값 : 0s

transition-delay: time | initial | inherit;

/* 초 단위(s), 밀리 초 단위(ms)단위로 적용 가능 */ 
transition-delay: .5s, 500ms; 

5. transition

• 개별 속성을 축약하여 한 줄의 코드로 작성 가능

transition: property duration timing-function delay | initial | inherit;

/* 개별 트랜지션 선언 시 */
transition-property: width;  
transition-duration: .5s;
transition-timing-function: ease; 
transition-delay: 1s; 	

/* 트랜지션 속기형(권장순서: property duration timing-fn delay) */
transition: width .5s ease 1s;

Transition 지원범위

*Transition은 IE브라우저에서 10이상부터 지원.

Animation이란?

Animation은 CSS 스타일과 키프레임(keyframes)으로 구성되며,
Transition 보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있음.

특징

• 적용될 대상은 @keyframes 규칙이 반드시 필요
• Transition과 다르게 방아쇠(Trigger) 없이도 실행 가능

Animation 9가지 속성

1. animation-name

@keyframes에서 설정한 애니메이션의 이름

animation-name: name;

/* 키프레임 이름 = 애니메이션 이름 */
@keyframes name {
  /* from(0%), to(100%) 또는 %로 작성 */
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
  25%, 75% {
    background-color: red;
  }
}

/* 유효하지 않은 애니메이션 이름 */
animation-name: 1name; // 숫자로 시작하는 이름 
animation-name: @name; // 특수 문자로 시작하는 이름

2. animation-duration

실행 시간(필수)
기본값 : 0s

animation-duration: time | initial | inherit;

/* 초 단위(s), 밀리 초 단위(ms)단위로 적용 가능 */ 
animation-duration: .5s, 500ms; 

3. animation-timing-function

가속, 감속 설정(*transition-timing-function과 동일)
기본값 : ease

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

4. animation-delay

실행 지연 시간
기본값 : 0s

animation-delay: time;

/* 초 단위(s), 밀리 초 단위(ms)단위로 적용 가능 */ 
animation-delay: .5s, 500ms;

5. animation-iteration-count

애니메이션 재생 횟수
기본값 : 1

animation-iteration-count: number | infinite | initial | inherit;

/* 5회, 무한 반복 */
animation-iteration-count: 5, infinite;

6. animation-direction

애니메이션 재생 방향
기본값 : normal

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

7. animation-fill-mode

애니메이션 종료 후 상태
기본값 : none

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

8. animation-play-state

애니메이션 재생/정지
기본값 : running

animation-play-state: paused | running | initial | inherit;

9. animation

개별 속성을 축약하여 한 줄의 코드로 작성 가능

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

예시

/* 애니메이션 키프레임 작성 */
@keyframes name_color {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}
@keyframes name_width {
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
}

/* 애니메이션 속기형
(권장순서: name duration timing-fn delay iteration-count direction fill-mode play-state) */
animation: name_color 1s linear 1s, name_width 1s ease-out infinite;

Animation 지원범위

*Animation은 IE브라우저에서 10이상부터 지원.