되감기 CSS 애니메이션

Question

하자 내가 사업부

<div id='animate'></div> 

을 가지고의 애니메이션을 가지고 말한다. 그러나 애니메이션을 다시 시작하고 그 반대 방향으로 애니메이션을 실행하면 어떻게됩니까? 내가 정말로 원하는 것은 애니메이션을 다시 시작하지 않고 현재 상태 (애니메이션이 끝나기 전)에서 되돌려 놓는 것입니다.

그럴 수 있습니까? 당신은 자바 스크립트를 통해 즉석에서 이러한 매개 변수를 설정하지 않는 한, 당신이 그렇게 할 수 있다고 생각하지 않도록

http://jsfiddle.net/fdZKw/

Answer 1

키 프레임 애니메이션 (100 %) 매개 변수 (0 %)에서와이 필요합니다. http://jsfiddle.net/fdZKw/1/

#animate{ 
    width:100px; 
    height:100px; 
    background:#0099CC; 
    transition:transform 5s; 
    -webkit-transition:-webkit-transform 5s; 
} 

#animate.go { 
    transform:translateX(500px); 
    -webkit-transform:translateX(500px); 
} 

: -의 transition 속성은 당신이 원하는 않지만 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

나는 당신의 바이올린에 적용했습니다