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: 50px; 
left: 0px; 

Answer 1

に

top: 400px; 
left: 300px; 

から行くだろうと思いました。

@-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

"逆" はかなり最近までの方向ではなかったです。 "alternate"は常に方向性を持っていましたので、 "逆"を実装するにはiteration-countを2にしてアニメーションに1回の繰り返しの負の開始オフセット（あなたの場合は-10秒）を与えます。 「alternated」セクションで開始されます。うまくいけば、 "逆"がすぐにブラウザに浸透することを望みます！

Answer 3

プロパティanimation-directionは、アニメーションを交互のサイクルで逆に再生するかどうかを定義します。

はこの1

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

してみてください