跳到CSS动画结束

Question

我已经实现了一个具有开始和结束状态的CSS3动画。一旦达到结束状态，动画停止并不重复。我需要做的是绕过整个动画的“跳转到结束”链接，但显示最终状态。是否有可能通过CSS3做到这一点。

这里的动画页面：http://bit.ly/1csZq2d

谢谢！

Answer 1

使用JavaScript只切换容器上的类重写以两种方式动画：

1. 覆盖了独立动画具有相同的最终结果动画，仍然设置结束状态animation-fill-mode: forwards;： http://codepen.io/shshaw/pen/yzhLb

2. 切换animation: none和手动添加的样式，这将是在动画的结尾： http://codepen.io/shshaw/pen/Jpmkc

第一种方法可能是更容易管理，所以你只是一个只包含结束状态编辑您的所有@keyframes在一个地方。它还具有加速动画的好处，可以快速完成，但仍然可以相对顺利地进行转换。