animation-direction

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe 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)

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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)

관련 주제