跳到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，其中一个只包含最终状态。它还具有加速动画以使其快速完成但仍然相对平稳过渡的好处。