लूप में CSS3 संक्रमण कैसे खेलें?

Question

निम्न शैली केवल CSS3 में संक्रमण सेट करने का एक उदाहरण है।
क्या इस खेल को लूप में बनाने के लिए एक शुद्ध सीएसएस चाल है?

div { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 0.1s; 
    -webkit-transition:width 0.1s; /* Safari and Chrome */ 
    -moz-transition:width 0.1s; /* Firefox 4 */ 
    -o-transition:width 0.1s; /* Opera */ 
    transition:width 0.1s; /* Opera */ 
} 

div:hover { 
    width:300px; 
} 

Answer 1

सीएसएस संक्रमण केवल शैलियों के एक सेट से दूसरे में एनिमेट करें; आप जो खोज रहे हैं वह CSS animations है।

आप एनीमेशन मुख्य-फ़्रेम को परिभाषित करने और तत्व पर लागू करने की जरूरत है: अपने पसंद के हिसाब से यह अनुकूलित करने के लिए कैसे पता लगाने के लिए ऊपर दिए गए लिंक

@keyframes changewidth { 
    from { 
    width: 100px; 
    } 

    to { 
    width: 300px; 
    } 
} 

div { 
    animation-duration: 0.1s; 
    animation-name: changewidth; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

चेक बाहर है, और आप ब्राउज़र उपसर्गों जोड़ना होगा ।