Cách ngăn đặt lại hoạt ảnh css3 khi hoàn tất?

Question

Tôi viết một hoạt ảnh css3 và nó chỉ được thực hiện một lần. Các hoạt hình hoạt động tốt, nhưng nó sẽ thiết lập lại khi các hình ảnh động hoàn thành. Làm thế nào tôi có thể tránh điều này, tôi muốn giữ kết quả thay vì đặt lại nó.

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

Đây là demo.

Answer 1

Thêm animation-fill-mode: forwards;

để keyframe cuối cùng của bạn .go

của phim hoạt hình tiếp tục áp dụng sau khi lặp cuối cùng của hình ảnh động hoàn tất.

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

Answer 2

Thêm phong cách sau để stylesheet của bạn:

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

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

Answer 3

Thêm hình ảnh động-fill-mode: chuyển tiếp;

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