सीएसएस कताई पहिया 5 सेकंड के बाद बंद करो?

Question

मैं इस सीएसएस कोड का उपयोग कर रहा मैं बेला पर पाया मेरी पहिया स्पिन:

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); 
    } 
} 

मूल रूप से मैं कताई वास्तव में के बाद यह 1800 degress तक पहुँच जाता है बंद करना चाहते हैं, और फिर 0 के लिए वापस जाओ तो मैं इसे बाद में फिर से स्पिन कर सकता हूं।

क्या ऐसा करना संभव है?

Answer 1

आप बस animation-iteration-count उचित रूप से सेट कर सकते हैं।

1800 डिग्री = 5 पूर्ण रोटेशन (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; 

यह स्वचालित रूप से पूरा होने पर 0 रीसेट करना चाहिए।

This documentation might give some more context।

संपादित

Updated your jsFiddle। साइड नोट, यदि आपके पास ओपेरा v12 है, तो आपको -o-animation आइटम भी शामिल करना चाहिए। इसके अलावा, शॉर्टेंड पर विचार करें।

-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;