2011-12-08 6 views
1

CSS3 애니메이션을 일시 중지 (또는 특정 시점에서 이벤트의 타이밍을 조정하는 방법)을 아는 사람이 있는지 궁금합니다.CSS3 애니메이션 일시 중지 (말하기)

나는 바운스 한 서클을 가지고 있고, 가장 높은 지점에 도달하기까지 2 초가 걸리고, 가장 높은 지점에서 일시 중지 (또는 오랜 시간을두기)를 한 다음 일시 중지/냉동 또는 긴 interveral 그것이 원래의 양보로 돌아갑니다. 사전에 도움을 주셔서 감사합니다.

+0

의 중복 가능성 [일시 정지 및 자바 스크립트를 사용하여 CSS3 애니메이션을 다시 시작?하는 방법 (http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-를 using-javascript) – Jon

+0

자바 스크립트를 사용하지 않고 이것을 수행 할 방법이 없습니다. –

답변

1

CSS 애니메이션 키 프레임이 문제를 해결할 수도 있습니다.

.whatever{ 
    -webkit-animation: bouncepause 10s infinite; 
} 

@-webkit-keyframes bouncepause { 
     0% { 
       bottom:0; 
     } 
     5% { 
       bottom:200px; 
     } 
     95% { 
       bottom:200px; 
     } 
     100% { 
       bottom:0; 
     } 
} 

나는 간단하게 만 -webkit- 공급 업체 접두사를 포함.

Demo

관련 문제