This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use 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 spec changes.
요약(Summary)
CSS의 animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 값들을 지정가능한 축약된 속성(shorthand property)이다.
애니메이션이 가능한 CSS 속성 리스트가 으로 사용가능한데; 그 속성들이 CSS transitions도 지원하는 동일한 속성들이라는 것에 주목할 필요가 있다.
| 초기값 | as each of the properties of the shorthand:
|
|---|---|
| 적용대상 | all elements, ::before and ::after pseudo-elements |
| 상속 | no |
| Media | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
문법(Syntax)
Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>where
<single-animation-name> = none | IDENT
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
예제(Examples)
명세(Specifications)
| Specification | Status | Comment |
|---|---|---|
| CSS Animations The definition of 'animation' in that specification. |
Working Draft |
브라우저 호환성(Browser compatibility)
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 # |
4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | iOS 2.0-webkit |