CSS animation-duration 속성

정의와 사용법

animation-duration 속성은 주기를 완료하는 데 필요한 시간을 초 또는 밀리초로 계산합니다.

추가로 참고:

CSS3 교육:CSS 애니메이션

HTML DOM 참조 매뉴얼:animationDuration 속성

예제

@keyframes 애니메이션의 이름을 지정하십시오:

div {
  animation-duration: 3s;
}

직접 테스트해 보세요

CSS 문법

animation-duration: time;
값 설명
time 애니메이션을 완료하는 데 걸리는 시간을 정의합니다. 기본 값은 0으로, 애니메이션 효과가 없는 것을 의미합니다.

기술 세부 사항

기본 값: 0
thừa kế: no
버전: CSS3
JavaScript 문법: object.style.animationDuration="3s"

브라우저 지원

표는 해당 속성을 완전히 지원하는 최초의 브라우저 버전을 나타냅니다.

표 -webkit-、-moz- 또는 -o- 가 접두사를 사용하는 숫자는 초기 버전을 사용하는 것을 의미합니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-