[CSS3] animation 사용하기

애니매이션을 CSS로 사용하기 위해선 @keyframes 을 정의하고 CSS에서 정의된 @keyframes 을 사용하고 모든 브라우져에서 동작하도록 벤더프리픽스를 적어주는 3단계의 작업이 필요합니다.

1. @keyframes 정의하기

- 우리가 정한 이름 (여기서는 tutsFade로 정했습니다)

- 스테이지: 0%-100%; from (0%와 같음) 그리고 to (100%와 같음)

- CSS 스타일: 각 구간에 적용시킬 스타일

@keyframes testAnimation {

  0% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}

위 @keyframes 코드와 아래의 @keyframes 코드는 동일합니다. 편한걸 사용하면 됩니다.

@keyframes testAnimation {

  from {

    opacity: 1;

  }

  to {

    opacity: 0;

  }

}

2. CSS에 만든 @keyframes 적용하기

- animation-name: @keyframes 이름 (예시에서는 testAnimation 을 사용함)

반드시 지정을 해줘야 하는 애니매이션의 이름입니다.

- animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간

(ex) animation-duration : 4s 

4초간 애니매이션을 실행하라~

- animation-timing-function: 애니메이션 속도 조절 

속성 : ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier )

ease - 느린 시작, 느린 시작, 천천히 끝내는 애니메이션 지정 (기본값)

linear - 시작부터 끝까지 동일한 속도의 애니메이션 지정

ease-in - 시작이 느린 애니메이션을 지정합니다.

ease-out - 느린 끝이있는 애니메이션을 지정합니다.

ease-in-out - 시작과 끝이 느린 애니메이션을 지정합니다.

cubic-bezier(n,n,n,n) - 입방체 베 지어 함수로 자신 만의 값을 정의 할 수 있습니다.

효과를 쉽게보려면 아래의 사이트를 참고하시면 쉽게 값을 보실수 있습니다. 

https://matthewlein.com/ceaser/ 

http://cubic-bezier.com

- animation-delay: 애니메이션이 시작하기 전 지연시간

(양수뿐만 아니라 음수도 적용이 가능합니다. ex : animation-delay: -1000ms;)

- animation-iteration-count: 반복 횟수 

(양의 정수와 infinite 만 적용가능 / infinite는 무한반복)

- animation-direction: 애니매이션의 방향을 제어

속성 : ( normal | reverse | alternate | alternate-reverse )

normal의 경우 처음으로 돌아갈때 부자연스럽지만

alternate 는 자연스럽게 처음으로 돌아갑니다.

주로 사용하는건 alternate 입니다.

- animation-fill-mode: 애니메이션 시작/끝 상태 제어 

속성 : ( none | forwards | backwards | both )

none - 아무것도 지정되지 않은 상태

forwards - 애니매이션 키프레임이 100%에 도달했을때 그 상태를 유지

backwards - 애니메이션 스타일을 실제 애니메이션이 시작전에 미리 적용

both - forwards , backwards 둘다 적용함

CSS 적용방법은 아래와 같습니다.

.test {

  animation-name: testAnimation;

  animation-duration: 4s;

  animation-delay: 1s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  animation-direction: alternate;

}

또는 간단하게 한줄로도 작성이 됩니다.

.test {  animation: testAnimation 4s 1s infinite linear alternate; }

3. 모든 브라우져에 동일하게 적용하기 위해 벤더프리픽스 적용하기!!

아쉽게도 모든 브라우져가 동일하게 CSS3를 지원하지 않습니다. 최근 브라우져는 모두 작동하지만 조금만 예전버젼에서는 동일하게 작동을 안하는 경우가 많아 벤더프리픽스를 적용을 해주어야 합니다. 물론 벤더프리픽스를 적용해도 작동이 안되는 구형 브라우져들이 있습니다.

애니메이션이 작동하는 브라우져는 아래와 같습니다. 

아래버젼보다 더 이전의 버젼에서는 작동을 하지 않습니다.

또한 버젼이 높으면 벤더프리픽스를 안적어도 되지만 이왕이면 적어주는게 좋을꺼 같네요~

크롬	43.0 /  4.0 -webkit-
인터넷 익스플로러	10.0 / 10.0 -ms-
파이어폭스	16.0 / 5.0 -moz-
사파리 (애플)	9.0 / 4.0 -webkit-
오페라	30.0 / 15.0 -webkit- / 12.0 -o-

적용시키는 방법은 아래와 같습니다.

.test {

    -webkit-animation: testAnimation 4s 1s infinite linear alternate;

    -moz-animation: testAnimation 4s 1s infinite linear alternate;

    -ms-animation: testAnimation 4s 1s infinite linear alternate;

    -o-animation: testAnimation 4s 1s infinite linear alternate;

    animation: testAnimation 4s 1s infinite linear alternate;

}

@keyframes 에도 벤더프리픽스를 적용시켜주셔야 합니다.

@-webkit-keyframes testAnimation { /* your style */ }

@-moz-keyframes testAnimation { /* your style */ }

@-ms-keyframes testAnimation { /* your style */ }

@-o-keyframes testAnimation { /* your style */ }

@keyframes testAnimation { /* your style */ }

기본적은 부분만 적어놓았기때문에 실제 적용은 직접해보세요~