css - css-animations/animation-direction/reverse

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

「逆」はごく最近まで方向ではありませんでした。ただし、「代替」は常に方向であったため、「逆」の人々を実装するには、反復カウントを2にし、アニメーションに1反復の負の開始オフセット(この場合は-10秒)を与えて、アニメーションが「代替」セクションから始まります。「リバース」がすぐにブラウザに浸透することを願っています!

Answer 2

これを行う別の方法もあります。

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

デモ

Answer 3

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

これを試してください

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