如何防止css3动画重置完成后？ [英] How to prevent css3 animation reset when finished?

问题描述

我写了一个css3动画，它只执行一次。动画效果很好，但是当动画完成时它会重置。如何避免这种情况，我想保留结果而不是重置它。

I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it.

<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> 

这里是演示。 Thx！

推荐答案

添加 animation-fill-mode：forward;

到您的 .go

动画的最后一次迭代完成后，动画的最终关键帧继续应用。

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

http://css-infos.net/property/-webkit-animation-fill-mode

这篇关于如何防止css3动画重置完成后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！