animation
=========

**`animation`** 단축 CSS 속성은 스타일 사이에 에니메이션을 적용합니다. `animation-name` (en-US), `animation-duration`, `animation-timing-function` (en-US), `animation-delay`, `animation-iteration-count` (en-US), `animation-direction`, `animation-fill-mode`, 그리고 `animation-play-state` (en-US)의 단축형입니다.

시도해보기
-----

구성 속성
-----

이 속성은 다음 CSS 속성의 단축형입니다.

* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-timing-function` (en-US)
구문
--


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

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

/\* 애니메이션 두 개 \*/
animation:
  3s linear slidein,
  3s ease-out 5s slideout;
```


`animation` 속성은 쉼표로 구분된 하나 이상의 단일 애니메이션으로 지정됩니다.

각각의 애니메이션은 다음과 같이 지정됩니다.

* `<time>` 값이 0개, 1개 또는 2개 존재
* 다음 값이 0개 또는 1개 존재
    + `<single-easing-function>`
    + `<single-animation-iteration-count>`
    + `<single-animation-direction>`
    + `<single-animation-fill-mode>`
    + `<single-animation-play-state>`
* 애니메이션의 선택적인 이름. `none`, `<custom-ident>` (en-US), 또는 `<string>` (en-US)일 수 있음.

**참고:** 현재 구현은 재설정 전용이므로 `animation-timeline` (en-US), `animation-range-start` (en-US), 그리고 `animation-range-end` (en-US)가 현재 이 목록에 포함되어 있지 않습니다. 즉, `animation`을 포함하면 이전에 선언된 `animation-timeline` 값이 `auto`로 재설정되고, 이전에 선언된 `animation-range-start`와 `animation-range-end` 값은 `normal`로 재설정되지만, 이러한 속성은 `animation`을 통해 설정할 수 없습니다. CSS 스크롤 기반 애니메이션 (en-US)을 만들 때 적용하려면 애니메이션 단축을 선언한 후 이러한 속성을 선언해야 합니다.

### 값

`<single-easing-function>`

전환 유형을 결정합니다. 값은 `<easing-function>` (en-US)에서 사용할 수 있는 값 중 하나여야 합니다.

`<single-animation-iteration-count>`

애니메이션이 재생되는 횟수입니다. 값은 `animation-iteration-count` (en-US)에서 사용 가능한 값 중 하나여야 합니다.

`<single-animation-direction>`

애니메이션이 재생되는 방향입니다. 값은 `animation-direction`에서 사용 가능한 값 중 하나여야 합니다.

`<single-animation-fill-mode>`

실행 전후에 애니메이션 대상에 스타일을 적용시키는 방법을 결정합니다. 값은 `animation-fill-mode`에서 사용 가능한 값 중 하나여야 합니다..

`<single-animation-play-state>`

애니메이션의 재생 여부를 결정합니다. 값은 `animation-play-state` (en-US)에서 사용 가능한 값 중 하나여야 합니다.

설명
--

각 애니메이션 정의 내에서 시간 값의 순서는 중요합니다. `<time>`으로 파싱할 수 있는 첫 번째 값은 `animation-duration`에 할당되고, 두 번째 값은 `animation-delay`에 할당됩니다.

각 애니메이션 정의에서 다른 값의 순서는 `animation-name` (en-US) 값을 다른 값과 구별하는 데에도 중요합니다. `animation` 단축 값이 `animation-name` 이외의 `animation` 속성 값으로 파싱할 수 있는 경우, 이 값은 `animation-name`이 아닌 그 속성에 먼저 적용됩니다. 이러한 이유로 `animation` 단축을 사용할 때 `animation-name` 값을 값 목록의 마지막 값으로 지정하는 것이 좋습니다. 이는 쉼표로 구분된 여러 개의 애니메이션 단축을 지정하는 경우에도 마찬가지입니다.

애니메이션을 적용하려면 애니메이션 이름을 반드시 설정해야 하지만, `animation` 축약의 모든 값은 선택 사항이며, 각 `animation` 구성 요소의 초기 값이 기본값입니다. `animation-name`의 초기 값은 `none`입니다. 즉, `animation` 단축 속성에 `animation-name` 값이 선언되지 않으면 속성에 적용할 애니메이션이 없는 것입니다.

`animation` 단축 속성에서 `animation-duration` 값이 생략되면 이 속성의 값은 기본적으로 `0s`로 설정됩니다. 이 경우 애니메이션은 계속 발생하지만( `animationStart` (en-US)와 `animationEnd` (en-US) 이벤트는 발생함) 애니메이션이 표시되진 않습니다.

접근성 문제
------

깜박이는 애니메이션은 주의력 결핍 과잉 행동 장애(ADHD)와 같은 인지 문제가 있는 사람들에게 문제가 될 수 있습니다. 또한 특정 종류의 움직임은 전정 장애, 간질, 편두통 그리고 암소시성 민감증을 유발할 수 있습니다.

축소된 애니메이션 경험에 선호도를 표현한 사용자를 위한 우대 경험을 만들기 위해 애니메이션을 일시 중지하거나 비활성화하는 메커니즘을 제공하고 움직임 감소 미디어 쿼리 (en-US)를 사용하는 것을 고려하십시오.

* 움직임 민감성을 위한 더 안전한 웹 애니메이션 설계 · A List Apart 기사
* 움직임 감소 미디어 쿼리 소개 | CSS-Tricks
* 반응형 움직임 디자인 | WebKit
* MDN WCAG 이해하기, 가이드라인 2.2 설명 (en-US)
* Success Criterion 2.2.2 이해하기 | W3C Understanding WCAG 2.0
형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `animation-name` (en-US): `none`
* `animation-duration`: `0s`
* `animation-timing-function` (en-US): `ease`
* `animation-delay`: `0s`
* `animation-iteration-count` (en-US): `1`
* `animation-direction`: `normal`
* `animation-fill-mode`: `none`
* `animation-play-state` (en-US): `running`
* `animation-timeline` (en-US): `auto`
 |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `animation-name` (en-US): as specified
* `animation-duration`: as specified
* `animation-timing-function` (en-US): as specified
* `animation-delay`: as specified
* `animation-direction`: as specified
* `animation-iteration-count` (en-US): as specified
* `animation-fill-mode`: as specified
* `animation-play-state` (en-US): as specified
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

형식 구문
-----
```

animation =   
  <single-animation>#    
  
<single-animation> =   
  <time [0s,∞]>                       ||  
  <easing-function>                   ||  
  <time>                              ||  
  <single-animation-iteration-count>  ||  
  <single-animation-direction>        ||  
  <single-animation-fill-mode>        ||  
  <single-animation-play-state>       ||  
  [ none | <keyframes-name> ]           
  
<easing-function> =   
  linear                          |  
  <linear-easing-function>        |  
  <cubic-bezier-easing-function>  |  
  <step-easing-function>            
  
<single-animation-iteration-count> =   
  infinite        |  
  <number [0,∞]>    
  
<single-animation-direction> =   
  normal             |  
  reverse            |  
  alternate          |  
  alternate-reverse    
  
<single-animation-fill-mode> =   
  none       |  
  forwards   |  
  backwards  |  
  both         
  
<single-animation-play-state> =   
  running  |  
  paused     
  
<keyframes-name> =   
  <custom-ident> (en-US)  |  
  <string> (en-US)          
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                |  
  ease-in                                             |  
  ease-out                                            |  
  ease-in-out                                         |  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             |  
  step-end                               |  
  steps( <integer> , <step-position>? )    
  
<linear-stop-list> =   
  [ <linear-stop> ]#    
  
<step-position> =   
  jump-start  |  
  jump-end    |  
  jump-none   |  
  jump-both   |  
  start       |  
  end           
  
<linear-stop> =   
  <number>               &&  
  <linear-stop-length>?    
  
<linear-stop-length> =   
  <percentage>{1,2}    
  
```

예제
--

**참고:** CSS 박스 모델 속성에 애니메이션을 적용하는 것은 권장되지 않습니다. 어떤 박스 모델 속성을 애니메이션하는 것은 본질적으로 CPU를 많이 사용합니다. 대신 transform 속성에 애니메이션을 적용하는 것을 고려하십시오.

### 해 뜨기

 여기서 우리는 하늘색 하늘을 가로지르는 노란 태양 애니메이션을 만들어봅니다.
 태양이 뷰포트 중앙으로 올라간 다음 시야에서 사라집니다.


```html
<div class="sun"></div>
```



```css
:root {
  overflow: hidden; /\* 수평선 아래 태양의 일부를 숨깁니다. \*/
  background-color: lightblue;
  display: flex;
  justify-content: center; /\* 태양을 배경 중앙에 배치합니다. \*/
}

.sun {
  background-color: yellow;
  border-radius: 50%; /\* 둥근 배경을 만듭니다. \*/
  height: 100vh; /\* 태양을 뷰포트의 크기로 만듭니다. \*/
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /\* 태양을 뷰포트 너머로 밀어냅니다. \*/
    transform: translateY(110vh);
  }
  to {
    /\* 태양을 기본 위치로 되돌립니다. \*/
    transform: translateY(0);
  }
}
```

### 여러 속성 애니메이션

이전 예제의 태양 애니메이션에 추가하여, 태양이 뜨고 질 때 태양의 색상을 변경하는 두 번째 애니메이션을 추가합니다. 태양은 수평선 아래에 있을 때 진한 빨간색으로 시작하여 상단에 도달하면 밝은 주황색으로 바뀝니다.


```html
<div class="sun"></div>
```



```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/\* 단일 애니메이션에서 여러 속성을 애니메이션할 수 있습니다. \*/
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /\* 설정되지 않은 속성, 즉 'filter'는 기본값으로 되돌아갑니다. \*/
  }
}
```

### 여러 애니메이션 적용하기

 여기 하늘색 배경에 뜨고 지는 태양이 있습니다.
 태양은 점점 무지개 색으로 변합니다.
 태양의 위치와 색상의 타이밍은 독립적입니다.


```html
<div class="sun"></div>
```



```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\* 여러 애니메이션은 쉼표로 구분되고, 각 애니메이션의 매개변수는 독립적으로 설정됩니다. \*/
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
```

### 여러 애니메이션 캐스케이딩

여기 밝은 파란색 배경에 노란색 태양이 있습니다. 태양은 뷰포트의 왼쪽과 오른쪽 사이에서 튕깁니다. rise 애니메이션이 정의됐더라도 태양은 뷰포트에 남아 있습니다. 상승 애니메이션의 transform 속성은 bounce 애니메이션으로 '덮어써지게' 됩니다.


```html
<div class="sun"></div>
```



```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\*
 캐스케이딩으로 나중에 선언된 애니메이션은
 이전에 선언된 애니메이션 속성을 재정의합니다.
 \*/
  /\* bounce는 rise가 설정한 transform을 '덮어쓰므로' 태양은 수평으로만 움직입니다. \*/
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}
```


추가 예제는 CSS 애니메이션 사용하기를 참조하세요.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # animation |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 애니매이션 사용하기
* JavaScript `AnimationEvent` API