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

“反向”直到最近才成为一个方向。不过，“交替”一直是一个方向，因此要实现“反向”，人们会将迭代计数设置为 2，然后为动画提供一次迭代的负开始偏移量(在您的情况下为 -10s)，以便动画将从“交替”部分开始。希望“反向”很快渗透到浏览器中!