CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 animation-timing-function 속성 CSS3 animation-name 속성

CSS3 animation-play-state 속성 사용 방법 및 예제

CSS3 animation-play-state 속성은 애니메이션을 재생하거나 정지할지 지정합니다.

다음 표는 이 속성의 사용 시나리오와 버전 기록을 요약합니다.

기본 값:	running
적용 대상:	모든 요소::before와::after 가상 요소
thừa kế:	없음
애니메이션 제작 가능:	아니요。참조 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object　　　object.style.animationPlayState="paused"

animation-play-state 사용 문법

이 속성의 문법은 다음과 같습니다:

animation-play-state:　paused　|　running　|　initial　|　inherit

다음 예제는 animation-play-state 속성.

예제

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-play-state:　paused;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-play-state:　paused;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

테스트해 보세요‹/›

속성 값

다음 표는 이 속성의 값을 설명합니다。

값	설명
paused	애니메이션 현재가 일시 중지되었음을 지정합니다.
running	애니메이션 현재가 실행 중임을 지정합니다. 기본 값입니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 animation-play-state 속성의 계산 값.

주의:animation-play-state 속성과 자바스크립트를 결합하여 루프 중간에 애니메이션을 일시 중지할 수 있습니다.

브라우저 호환성

animation-play-state 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

	파이어폭스 5+ ^-moz-，15 + 구글 크롬 4+ ^-webkit- 인터넷 익스플로러 10+ 애플 사파리 4+ ^-webkit- 오페라 12+ ^-o-，15+ ^-webkit-

더 읽기

다음 튜토리얼을 참조하십시오:CSS3애니메이션。

CSS3 animation-timing-function 속성 CSS3 animation-name 속성