参见英文答案 >
Stopping a CSS3 Animation on last frame5个答案我写一个css3动画，它只执行一次。动画效果很好，但是当动画完成时它会重置。如何避免这种情况，我想保留结果而不是重置它。
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script>
- $(function(){
- $("#fdiv").delay(1000).addClass("go");
- });
- </script>
- <style>
- #fdiv{
- width: 10px;
- height: 10px;
- position: absolute;
- margin-left: -5px;
- margin-top: -5px;
- left: 50%;
- top: 50%;
- background-color: red;
- }
- .go{
- -webkit-animation: spinAndZoom 1s 1;
- }
- @-webkit-keyframes spinAndZoom {
- 0% {
- width: 10px;
- height: 10px;
- margin-left: -5px;
- margin-top: -5px;
- -webkit-transform: rotateZ(0deg);
- }
- 100% {
- width: 500px;
- height: 500px;
- margin-left: -250px;
- margin-top: -250px;
- -webkit-transform: rotateZ(360deg);
- }
- }
- </style>
- <div id="fdiv">
- </div>
这是demo.Thx！
解决方法
添加动画填充模式：转发;
到你的.go
The animation’s final keyframe continues to apply after the final iteration of the animation completes.
