CSS3关键帧动画反向跳转关键帧

Question

我有一个简单的 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 对称的关键帧。

非常感谢任何输入。

Answer 1

我使用 CSS 在基于 :hover 的两个方向上为 3D 旋转木马产品目录制作动画时，也有同样的跳跃感。

摆弄了一些显而易见的想法，如 animation-fill-mode:forwards 等，但运气不佳，最终解决的是将两个过渡语法混合在一起，持续时间很短，并将转换本身作为属性。在transition chasing过程中捕捉到transform的state，更新到被transform的元素保持原样，效果似乎符合规范，应该是一个有效的解决方案

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

请原谅任何打字错误，因为我正在使用垫子。