이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

CSS의 animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 값들을 지정가능한 축약된 속성(shorthand property)이다. 

구문

Formal syntax: <single-animation>#

where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<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
<keyframes-name> = <custom-ident> | <string>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

예제

CSS animations 예제

명세

Specification Status Comment
CSS Animations
The definition of 'animation' in that specification.
Working Draft  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 10Opera Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 12.1 — 15
No support 12 — 15
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari Full support Yes
Full support Yes
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 2
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes The animation-fill-mode property is not supported in Android browsers below 2.3.
Chrome Android Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 12.1 — 14
No support 12 — 14
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari iOS Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support 4.0
Full support 4.0
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

 

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, JJapShe, teoli, mirinae312
최종 변경자: urty5656,