如何在完成後防止css3動畫重置？

Question

我寫了一個css3動畫，它只執行一次。動畫效果很好，但動畫完成後會重置。我怎樣才能避免這一點，我想保持結果而不是重置它。

$(function() { 
 
    $("#fdiv").delay(1000).addClass("go"); 
 
});

#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: 400px; 
 
    height: 400px; 
 
    margin-left: -200px; 
 
    margin-top: -200px; 
 
    -webkit-transform: rotateZ(360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div id="fdiv"></div>

這裏是demo。

Answer 1

添加animation-fill-mode: forwards;

您.go

動畫的最後一個關鍵幀繼續動畫的最後一次迭代完成後提出申請。

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

Answer 2

添加下面的樣式到你的樣式表：

.go { 
    /* Already exists */ 
    -webkit-animation: spinAndZoom 1s 1; 

    /*New content */ 
    -webkit-animation-fill-mode: forwards; 
} 

Answer 3

添加動畫填充模式：前鋒;

.go { 
    -webkit-animation-fill-mode: forwards; 
}