#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;
答案 0 :(得分:5)
答案 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;
}
}
答案 2 :(得分:0)
animation-direction
属性定义动画是否应在交替周期内反向播放。
试试这个
-webkit-animation-direction:alternate; /* Safari and Chrome */
animation-direction:alternate;