chạy/tạm dừng hoạt ảnh CSS với jQuery

Question

Tôi muốn bắt đầu với một hoạt ảnh CSS bị tạm dừng, sau đó sử dụng jQuery để chạy hoạt ảnh trong một giây trước khi tạm dừng lại.

Các css là dưới đây:

#animation { 
    -webkit-animation: one 5s infinite; 
    -webkit-animation-play-state: paused; 
} 

@-webkit-keyframes one { 
    0% { .... } 
    ..... 
    100% { .... } 
} 

Nó có một số khung hình phức tạp và mục đích là rằng nó sẽ chơi trong 1 giây đến vị trí 20% sau đó dừng lại.

Tôi đã thử các jQuery dưới đây nhưng nó đã không làm việc:

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");   
}); 

(# Nhấp vào là div Tôi muốn sử dụng chính là nguyên nhân cho các hình ảnh động)

Nếu tôi loại bỏ sự chậm trễ và sau đó tạm dừng nó hoạt động tốt nhưng rõ ràng là tiếp tục lặp.

ví dụ:

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running");    
}); 

gì bạn người tốt sẽ đề nghị?

Answer 1

Trì hoãn jQuery() không hoạt động khi bạn đang thao tác thuộc tính css. Sử dụng setTimeOut() thay vì

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running"); 
    setTimeout(function() { 
     $("#animation").css("-webkit-animation-play-state", "paused"); 
    }, 1000); 
});