CSS 변환과 애니메이션 - 인터랙티브 웹 개발 | 1분코딩

1. Transform

# CSS Transform은 하드웨어 가속을 이용해서 성능이 좋다

: 어떤 태그를 absolute 후 left로 이동하는 것 보다 translateX()를 이용하는 것이 훨씬 부드럽게 움직인다.

* 하드웨어 가속을 이용한다는 것은 GPU를 사용한다.

 

# CSS Transform은 브라우저가 지오메트릭을 다시 편성하는 과정(Reflow)에서 CSS 대상만 크기나 위치를 계산해서 렌더링하기 때문에 연산할 것도 적고 성능도 더 좋다.

 

 

2. Transition

: 값이 수치로 표현되는 속성이 값의 변화(수치로)가 있을 때 변화과정을 애니메이션으로 만들어준다.

 

# transition-property : 속성

# transition-duration : 재생시간

# transition-delay : 지연시간

# transition-timing-function : 가속운동

 * 베지어곡선 - x축 : 진행시간  |  y축 : 가속도

 

 

3. Animation

# keyframes : 애니메이션의 시작과 끝에서 변화가 있는 지점    * %로 지정

# 타임라인 : 애니메이션 시작(0%, from)과 끝(100%, to)의 과정

# animation-interation-count : 반복횟수    *infinite: 무제한

# animation-direction : 애니메이션 뱡향    

 * alternate : 번갈아 하는  |   reverse : 시작을 반대로  |  alternate-reverse : 시작을 반대로 번갈아 하는

# animation-fill-mode : 애니메이션이 끝난 후의 상태 지정

 * forwards : 끝난 지점에서 멈춤

# animation-play-state :  애니메이션의 진행 상태를 설정

 * paused : 정지

 

3-3. frame by frame animation

: 셀 애니메이션 방식을 얘기하며, 장면 별로 하나하나 그려서 움직임을 표현함 

 

# 이미지 스프라이트를 활용 : 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에  background-position을 이용하여 배경이미지를 배치하는 방법

# 고해상도 이미지를 표현하기 위해선 실제 이미지의 크기를 적용 이미지의 크기보다 2배 크게 한다 

# background-size는 background 속성에서 슬래시(/)로 구분    * background: #000 url() no-repeat 0 0 / auto 150px;

# timing-function 속성 중 step을 이용

- step-start : steps( 1, start )와 같습니다.

- step-end : steps( 1, end )와 같습니다.

- steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.

@keyframes frameby {
    to {
    	background-position: -2550px 0;    /* 스프라이트 이미지 width의 음수 */
    }
}
.frameby {
    width: 150px;
    height: 150px;
    background: url('스프라이트 이미지 경로') no-repeat 0 0 / auto 150px;
    animation : frameby 1s infinite steps(17); 
    /* steps(17) : 스프라이트 이미지 width 값 / 요소(.frameby) width 값 = 17 */
}

* frame by frame animation을 gif 이미지로 할 경우 단점 

: gif 파일은 알파 채널이라 투명도가 적용되지 않는다. 또한 안티엘리어싱으로 부드럽게 표현된 반투명한 부분이 하얗게 표현돼서 이미지가 깨진 것 처럼 보인다.