css animation 정리

1. @keyframes

<style>
	div {
      position: absolute;
      width: 100px; height: 100px;
      animation-name: move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
	/*애니메이션 이름 move */
    @keyframes move { 
      /* 애니메이션 시작 시점 */
      from { left: 0; }
      /* 애니메이션 종료 시점 */
      to   { left: 300px; }
    }
    
    /* from, to 키워드 대신 % 사용 가능 */
    @keyframes move {
      0%   { left: 0; }
      50%  { left: 100px; }
      100% { left: 300px; }
    }
</style>

2. animation-name

> @keyframes 애니메이션 이름을 지정한다

<style>
  /* Single animation */
  animation-name: none;
  animation-name: test_05;
  animation-name: -specific;
  animation-name: sliding-vertically;

  /* Multiple animations */
  animation-name: test1, animation4;
  animation-name: none, -moz-specific, sliding;
</style>

3. animation-duration

> 한 싸이클의 애니메이션에 소요되는 시간을 초(s), 밀리초(ms)로 지정

animation-duration은 반드시 지정 !!
지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다

<style>
  /* Single animation */
  animation-duration: 6s;
  animation-duration: 120ms;

  /* Multiple animations */
  animation-duration: 1.64s, 15.22s;
  animation-duration: 10s, 35s, 230ms;
</style>

4. animation-timing-function

> 애니메이션 효과를 위한 타이밍 함수를 지정

<style>
  /* Keyword values */
  animation-timing-function: ease;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: linear;
  animation-timing-function: step-start;
  animation-timing-function: step-end;

  /* Function values */
  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  animation-timing-function: steps(4, end);

  /* Steps Function keywords */
  animation-timing-function: steps(4, jump-start);
  animation-timing-function: steps(10, jump-end);
  animation-timing-function: steps(20, jump-none);
  animation-timing-function: steps(5, jump-both);
  animation-timing-function: steps(6, start);
  animation-timing-function: steps(8, end);

  /* Multiple animations */
  animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
</style>

5. animation-delay

> 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간 지정

<style>
  /* Single animation */
  animation-delay: 3s;
  animation-delay: 0s;
  animation-delay: -1500ms;

  /* Multiple animations */
  animation-delay: 2.1s, 480ms;
</style>

6. animation-iteration-count

> 애니메이션 재생 횟수를 지정, 기본값은 1이며 infinite로 무한반복 할 수 있다.

<style>
  /* Keyword value */
  animation-iteration-count: infinite;

  /* <number> values */
  animation-iteration-count: 3;
  animation-iteration-count: 2.4;

  /* Multiple values */
  animation-iteration-count: 2, 0, infinite;
</style>

7. animation-direction

> 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정

<style>
  /* Single animation */
  animation-direction: normal; /* 기본값으로 from(0%)에서 to(100%) 방향*/
  animation-direction: reverse; /* to에서 from 방향으로 진행 */
  animation-direction: alternate; /* 홀수번째는 normal로, 짝수번째는 reverse로 진행 */
  animation-direction: alternate-reverse; /* 홀수번째는 reverse로, 짝수번째는 normal로 진행 */

  /* Multiple animations */
  animation-direction: normal, reverse;
  animation-direction: alternate, reverse, normal;

/* example */
  div {
      animation: myAnimation 5s infinite;
      /*홀수번째는 normal로, 짝수번째는 reverse로 진행*/
      animation-direction: alternate;
    }
</style>  

8. animation-fill-mode

> 애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정

<style>
  /* Single animation */
  /*  none
  대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
  종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다. */
  animation-fill-mode: none;
  
  /*  forwards
  대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
  종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다. */
  animation-fill-mode: forwards;
  
  /*  backwards
  대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다. */
  animation-fill-mode: backwards;
  
  /*  both
  대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다. */  
  animation-fill-mode: both;

  /* Multiple animations */
  animation-fill-mode: none, backwards;
  animation-fill-mode: both, forwards, none;
</style>

9. animation-play-state

> 애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running이다.

<style>
  /* Single animation */
  animation-play-state: running;
  animation-play-state: paused;

  /* Multiple animations */
  animation-play-state: paused, running, running;
</style>

10. animation

> 모든 애니메이션 프로퍼티를 한번에 지정한다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.

↓ 지정 방법은 다음과 같다.

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

<style>
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;

/* @keyframes name | duration */
animation: slidein 3s;
</style>