css - 跳到 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在一个地方编辑所有内容，其中一个只包含结束状态。它还具有加快动画速度的好处，以便它快速完成，但仍然相对平稳地过渡。