css - 使用@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/他们分享的地方一个小功能来简化使用可以用来支持其他浏览器的前缀。

Answer 2

我赞成@Jedidiah 的回答，我认为这就是您所需要的。

顺便说一句，如果您对替代的简单 CSS3 解决方案感兴趣，请添加到您的#bar：

transition: all 1s;
-webkit-transition: all 1s

Running Demo

潜在的缺点（取决于您的需要）：

1. 它不会尊重进度条的先前速度（无论您是在 10% 还是 90%，剩余部分都需要 1 秒才能完成……但这是安装程序的进度条工作的频率，所以它可能不是问题）；
2. 它不会运行所有动画：如果您在上半场，它将填充到左侧，而不是完成所有回合。