This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
animation-direction CSS 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.
/* Single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* Multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* Global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset;
축약 속성 animation을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.
| 초기값 | normal |
|---|---|
| 적용대상 | all elements, ::before and ::after pseudo-elements |
| 상속 | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
문법(Syntax)
값(Values)
normal- 애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.
reverse- 애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은 ease-out형태로 변경됩니다.
alternate- 애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
alternate-reverse- 애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
노트: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.
Formal syntax
<single-animation-direction>#where
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
예제(Examples)
CSS animations를 보십시오.
명세(Specifications)
| Specification | Status | Comment |
|---|---|---|
| CSS Animations The definition of 'animation-direction' in that specification. |
Working Draft | Initial definition. |
브라우저 호환성(Browser compatibility)
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes)-webkit 43.0 |
(Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12-o 12.50 |
4.0-webkit |
reverse |
19 | (Yes) | 16.0 (16.0) | 10 | (Yes) | (Yes) |
alternate-reverse |
19 | (Yes) | 16.0 (16.0) | 10 | (Yes) | (Yes) |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | (Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
? | ? | ? | (Yes)-webkit 43.0 |
reverse |
No support | ? | (Yes) | 16.0 (16.0) | ? | ? | No support | (Yes)-webkit |
alternate-reverse |
? | ? | (Yes) | 16.0 (16.0) | ? | ? | ? | (Yes)-webkit |
[1] Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) 이후 기본 설정은 true로 기본 설정됩니다.
같이 보기(See also)
- Using CSS animations
- JavaScript
AnimationEventAPI