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来制作3D旋转木马产品目录的动画具有相同的跳跃性在两个方向基于：悬停。

摆弄了明显的想法，比如动画填充模式：转发等等，最终解决它的最好的财富就是混合两位过渡语法，持续时间很短，变换本身就是属性。在过渡追逐捕捉变换状态的过程中，它的更新对被转换的元素保持不变，效果似乎符合规范，因此它应该是一个有效的解决方案

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

请原谅所有错别字，因为我正在使用垫子。

Answer 2

经过多次拔毛（剩下多少......）我最终使用了优秀的绿色图库：http://www.greensock.com/gsap-js/ 它为整个动画提供了更多的控制。

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

2 个答案: