使用@keyframes 动画后的过渡

Question

我有一个使用 css3 关键帧的加载指示器（一个宽度从 0% 到 100% 连续动画的条）。我.loading通过加载栏添加一个类来触发此行为。现在，一旦我完成加载，我就想从关键帧中动画出来。比如说，当我完成加载时，宽度动画为 50%，我不会让它跳到 100%，而是将其缓和到 100% 应该保持的位置。

我尝试在加载栏类中添加 和transition，animation但似乎都不起作用。我该怎么办？

这是jsFiddle。

Answer 1

您可以使用animationiteration( MDN ) 事件来检测动画何时到达循环末尾，然后删除该类。

$('#bar').on('webkitAnimationIteration', function(e){
    $('#bar').removeClass('loading').off('webkitAnimationIteration');
});

我在这里更新了小提琴：http://jsfiddle.net/jedidiah/kYnhF/6/

-

为了简单起见，我只在小提琴中添加了 webkit 前缀，但是这里有一篇关于 javascript 中的 css 动画事件的有用文章http://www.sitepoint.com/css3-animation-javascript-event-handlers/他们在其中共享一个小功能来简化使用可用于支持其他浏览器的前缀。