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

问题描述

我写了一个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！

解决方案

添加 animation-fill-mode：forward; / p>

到您的 .go

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

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

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> 

Here is the demo. Thx!

解决方案

Add animation-fill-mode: forwards;

to your .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屋！