CSS animation-duration 속성
예시
애니메이션이 3초에 한 주기를 완료하도록 지정합니다.
div {
animation-duration: 3s;
}
정의 및 사용
속성은 애니메이션 이 animation-duration
한 주기를 완료하는 데 걸리는 시간을 정의합니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
animation-duration | 43.0 3.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS 구문
animation-duration: time|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
time | Specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 애니메이션
HTML DOM 참조: animationDuration 속성