CSS-動畫/動畫方向/反向

Question

#div { 
position: absolute; top: 50px; 
width: 100px; height: 100px; background: blue; 
    -webkit-animation-name: shift; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-direction: reverse; 
    } 
@-webkit-keyframes shift{ 
    from{ 
     top: 50px; 
     left: 0px;  
    } 
    20% { 
     top: 150px; 
     left: 100px; 
    } 
    to { 
     top: 400px; 
     left: 300px; 
    } 
} 

http://jsfiddle.net/uVv65/2/ 爲什麼反向動畫方向是一樣的正常？我認爲它會從

top: 400px; 
left: 300px; 

去

top: 50px; 
left: 0px; 

Answer 1

還有另一種方式來做到這一點。

@-webkit-keyframes shift{ 
    from{ 
     top: 50px; 
     left: 0px;  
    } 
    10% { 
     top: 150px; 
     left: 100px; 
    } 
    50% { 
     top: 400px; 
     left: 500px;  
    } 
    to { 
     top: 50px; 
     left: 0px; 
    } 
} 

Demo

Answer 2

「反向」 不是一個方向直到最近。然而，「交替」一直是一個方向，所以實現「反向」的人會讓迭代數爲2，然後給動畫一個迭代的負開始偏移量（在你的情況下爲-10s），以便動畫將從「交替」部分開始。希望「反向」滲透到瀏覽器很快！

Answer 3

animation-direction屬性定義動畫是否應該在交替循環中反向播放。

試試這個

-webkit-animation-direction:alternate; /* Safari and Chrome */ 
     animation-direction:alternate;