Question

假设我有一个div

<div id='animate'></div>

并有一个动画：

@keyframes move{
  from{transform:translateX(500px);}
  to{transform:translateX(0px);}
}

我有一个按钮，单击该按钮将以编程方式将animationDirection设置为反向。但是，它会重新启动动画并反向执行动画。我真正想要的是将动画从其当前状态（在动画结束之前）反转而不重新启动。

这可能吗？

http://jsfiddle.net/fdZKw/

Answer 1

关键帧动画需要一个从（0％）和一个到（100％）的参数，所以除非你通过javascript动态设置这些参数，否则我认为你无法实现。虽然，transition属性可以满足您的需求 - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

我已将它应用于你的小提琴：http://jsfiddle.net/fdZKw/1/

#animate{
    width:100px;
    height:100px;
    background:#0099CC;
    transition:transform 5s;
    -webkit-transition:-webkit-transform 5s;
}

#animate.go {
    transform:translateX(500px);
    -webkit-transform:translateX(500px);
}

重绕CSS动画

1 个答案: