復卷CSS動畫

Question

讓說，我有一個div

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

並具有動畫：

@keyframes move{ 
    from{transform:translateX(500px);} 
    to{transform:translateX(0px);} 
} 

，我有一個按鈕，點擊會編程設置animationDirection時逆轉。但是會發生什麼，它會重新啓動動畫並反向執行動畫。我真正想要的是將動畫從其當前狀態（動畫結束之前）反轉而不重新啓動。

這可能嗎？

http://jsfiddle.net/fdZKw/

Answer 1

關鍵幀動畫需要從（0％）和（100％）的參數，所以除非你設置通過JavaScript飛這些參數，我不認爲你可以做到這一點。雖然，在transition屬性你想要做什麼 - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

我已經把它應用到你的提琴：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); 
}