Bánh xe quay vòng CSS dừng sau 5 giây?

Question

Tôi đang sử dụng mã CSS này tôi tìm thấy trên fiddle để quay bánh xe của tôi:

http://jsfiddle.net/gaby/9Ryvs/7/

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 4000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spin; 
    -moz-animation-duration: 4000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spin; 
    -ms-animation-duration: 4000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 

    animation-name: spin; 
    animation-duration: 4000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@-ms-keyframes spin { 
    from { -ms-transform: rotate(0deg); } 
    to { -ms-transform: rotate(360deg); } 
} 
@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    from { 
     transform:rotate(0deg); 
    } 
    to { 
     transform:rotate(360deg); 
    } 
} 

Về cơ bản tôi muốn dừng quay chính xác sau khi nó đạt đến 1800 degress, và sau đó quay trở lại 0 để Tôi có thể quay lại sau.

Điều đó có thể thực hiện được không?

Answer 1

Bạn chỉ có thể đặt animation-iteration-count một cách thích hợp.

1800 độ = 5 toàn quay (5 * 360)

-webkit-animation-iteration-count:5; 
-moz-animation-iteration-count:5; 
-ms-animation-iteration-count:5; 
-o-animation-iteration-count:5; 
animation-iteration-count:5; 

Nó sẽ tự động reset về 0 sau khi hoàn thành.

This documentation might give some more context.

EDIT

Updated your jsFiddle. Lưu ý phụ, bạn nên cân nhắc bao gồm cả -o-animation các mục trong đó, trong trường hợp chúng có Opera v12. Ngoài ra, hãy xem xét viết tắt.

-webkit-animation:spin 4000ms linear 0s 5; 
-moz-animation:spin 4000ms linear 0s 5; 
-ms-animation:spin 4000ms linear 0s 5; 
-o-animation:spin 4000ms linear 0s 5; 
animation:spin 4000ms linear 0s 5;