CSS-动画/动画方向/反向

时间:2012-05-05 11:46:48

标签: css css3 css-animations

#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;  

3 个答案:

答案 0 :(得分:5)

直到最近,“反向”才是方向。 “alternate”一直是一个方向,所以实现“反向”的人会使迭代计数为2,然后给动画一个迭代的负起始偏移(在你的情况下是-10s),这样动画将从“交替”部分开始。希望很快“反向”渗透到浏览器中!

答案 1 :(得分: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

答案 2 :(得分:0)

animation-direction属性定义动画是否应在交替周期内反向播放。

试试这个

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