html - 如何在 css3 中延迟每个循环动画？

Question

我试图在结束时停止循环动画一段时间。

animation: 6s linear 2s infinite;

我尝试使用 css3 简写动画属性将动画延迟 2 秒，但没有成功。

如何实现？

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

编辑:这种方法解决了我的问题:stackoverflow.com/a/32223950/1428241

Answer 1

我认为单靠 CSS 无法停止动画。但是可以过段时间用JS把class属性改成没有动画的class。

var element = document.getElementById('myElement');
setTimeout(function(){ element.className = 'newClass'; }, 2000);

编辑:这是一个 fiddle http://jsfiddle.net/Nillervision/8ncgs94k/