2

我有一个简单的 CSS3 关键帧动画，我想在它运行时反转它。请参阅此处的代码：http: //jsfiddle.net/breizo/EUVav/

@-webkit-keyframes transform-keyframes {
0%      {-webkit-transform:translateX(0px) translateY(0px) rotate(270deg);}
25%     {-webkit-transform:translateX(200px) translateY(0px) rotate(270deg);}
25.01%  {-webkit-transform:translateX(200px) translateY(0px) rotate(0deg);}
50%     {-webkit-transform:translateX(200px) translateY(200px) rotate(0deg);}
50.01%  {-webkit-transform:translateX(200px) translateY(200px) rotate(90deg);}
75%     {-webkit-transform:translateX(0px) translateY(200px) rotate(90deg);}
75.01%  {-webkit-transform:translateX(0px) translateY(200px) rotate(180deg);}
100%    {-webkit-transform:translateX(0px) translateY(0px) rotate(180deg);}
}

任何人都有一个技巧来防止动画跳到另一个关键帧而不是当前的关键帧？看起来它正在跳转到与持续时间的 1/2 对称的关键帧。

非常感谢任何输入。

4

2 回答 2

1

I had the same flavor of jumpiness using CSS to animate a 3D carousel product catalog In two directions based on :hover.

Having fiddled with obvious ideas like animation-fill-mode:forwards and such with not the least good fortunes what finally solved it was to mix in two bits of transition syntax with a tiny duration and the transform itself as the property. In the course of transition chasing to catch transform's state ,it's updates To the element being transformed remained intact , and the effect seems to fit the specs , so it should be a valid solution

transition-duration: 0.2s;transition-property:transform;

pardon any typos ,as I"m using a pad.

于 2013-09-25T19:12:52.397 回答
0

在拉了很多头发之后（剩下的不多......）我最终使用了出色的 greensock 库：http ://www.greensock.com/gsap-js/ 它为整个动画提供了更多控制。

于 2013-03-22T16:13:25.327 回答