# 애니메이션

## 애니메이션 (Animation)

{% hint style="warning" %}
애니메이션 속성은 [IE10 이상 지원](https://caniuse.com/?search=animation)한다. 
{% endhint %}

* animation-name 애니메이션 이름 (@keyframes 이름)<br>
* animation-duration 애니메이션 시간(초단위)<br>
* animation-timing-function 애니메이션 타이밍 함수<br>
* animation-delay 애니메이션 지연시간
  * 400ms(= 0.4s), 2s, -2s
  * 음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작된다.<br>
* animation-direction 애니메이션 종료 후, 진행 (순/역)방향
  * `<normal>` : from - to (기본값)
  * `<reverse>` : to - from
  * `<alternate>` : 홀(nomal) 짝(reverse)
  * `<alternate-reverse>` : 홀(reverse) 짝(nomal)<br>
* animation-iteration-count 애니메이션 반복 횟수
  * 1(기본값), `<number>`(2,4,1.5...), `<infinite>`무한반복<br>
* animation-play-state 애니메이션 재생/일시정지 설정
  * `<running>`(기본값) `<paused>`<br>
* animation-fill-mode 애니메이션 시작 전/종료 후 키프레임 설정 애니메이션이 실행 상태가 아닐 때 (대기 or 종료) 요소의 스타일 지정
  * `<none>`:
    * 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
    * 종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
  * `<forwards>`:
    * 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
    * 종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
  * `<backwrads>`:
    * 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
    * 종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
  * `<both>` :
    * 대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
    * 종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.<br>
* animation 애니메이션 속기형
  * 순서 : `<name>` `<timing-funtion>` `<iterration-count>` `<direction>` `<fill-mode>` `<delay>`

## 예시

```css
.sonic {
  animation-name: sonic-running;
}

/* 애니메이션 정의 */
@keyframes sonic-running {
  /* @keyframes 이름 */
  from {
  } /* 시작하는 지점의 상태, 생략 가능 */
  to {
  } /* 끝나는 지점의 상태 */
}

/* 또는 */
@keyframes sonic-running {
  0% {
  } /* from {} */
  50% {
  }
  75% {
  }
  100% {
  } /* to {} */
}
```

```css
.sonic {
  animation-play-state: paused;
}

/* 응용 */
.sonic-sonic-adventure:active .sonic {
  animation-play-state: paused; /* 클릭 시 멈춤 */
  animation-play-state: running; /* 클릭 시 재생 */
}
```

## 참고

* [애니메이션 사용하기](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
* [애니메이션 문법](https://developer.mozilla.org/ko/docs/Web/CSS/animation)
* [easings.net](http://easings.net/ko)
* [Ceaser - CSS EASING ANIMATION TOOL](https://matthewlein.com/tools/ceaser)
* [CSS Animation (실습 시작) by codepen](https://codepen.io/hanna244/pen/wvzOYQV)
* [CSS Animation (실습 완료) by codepen](https://codepen.io/hanna244/pen/MWjxPZj)