अनंत लूप के साथ चेन सीएसएस एनिमेशन

Question

क्या दो एनिमेशन को चेन करना संभव है और फिर इस श्रृंखला को अनिश्चित काल तक लूप करना संभव है? {|--ani1--|--ani1--|--ani1--|--ani2--|--ani2--|} x loop

div { 
    width: 50px; height: 50px; border: 3px solid black; 
    animation: ani1 3s 0s 3, ani2 3s 9s 2; 
    /*animation-iteration-count: infinite;*/ 
} 
@keyframes ani1 { 
    from { background: green; } 
    50% { background: red; } 
    to { background: green; }  
} 
@keyframes ani2 { 
    from { width: 100px; } 
    50% { width: 150px; } 
    to { width: 100px; }  
} 

यहाँ का परीक्षण किया: http://jsfiddle.net/kQA6D/

Answer 1

संक्षेप में, कोई (क्रोम में देखे जाने योग्य बनाएं -webkit- उपसर्ग का उपयोग करता है) (कुछ काम आसपास संभव हैं)

आपकी लाइन animation-count: infinte वर्तमान में यह तत्व के लिए क्या है: animation: ani1 3s 0s infinite, ani2 3s 9s infinite;। तो, के बाद से पहली एनीमेशन घोषित infinite का एक पुनरावृत्ति संख्या है, दूसरी

सबसे आसान और सबसे परंपरागत तरीके जावास्क्रिप्ट का उपयोग करने के होगा और animationEnd पहुँचा जा कभी नहीं होगा ऐसा करने के लिए (मैं का उपयोग क्रेग बाकलेर के PrefixedEvent function लेकिन यह आवश्यक नहीं है) केवल

var elem = document.querySelectorAll("div")[0], 
    pfx = ["webkit", "moz", "MS", "o", ""];  
function PrefixedEvent(element, type, callback) { 
    for (var p = 0; p < pfx.length; p++) { 
     if (!pfx[p]) type = type.toLowerCase(); 
     element.addEventListener(pfx[p]+type, callback, false); 
    } 
}  
PrefixedEvent(elem, "animationend", function() { switchAnims(elem) });  
function switchAnims(element) { 
    if(element.style.animationName = "ani1") { 
     element.style.animationName = "ani2"; 
    } else { 
     element.style.animationName = "ani1"; 
    } 
} 

(वेबकिट - अन्य उपसर्गों जोड़ा जाना चाहिए)

अन्यथा इस समय एक शुद्ध सीएसएस फिक्स के लिए आप उन्हें एक एनीमेशन के रूप में गठबंधन करने के लिए होगा। आप के लिए है कि देखो की तरह

@keyframes aniBoth { 
    0%, 16.666%, 33.333%  { background: green; } 
    8.333%, 24.999%, 41.666% { background: red; } 
    50%      { background: green; } 
    50.001%     { background:white; width: 100px; } 
    75%, 100%    { width: 100px; } 
    62.5%, 87.5%    { width: 150px; } 
} 

होगा (वेबकिट केवल - अन्य उपसर्गों जोड़ा जाना चाहिए)

Answer 2

नहीं, आप, विशेष कदम आप चाहते हैं के साथ एक एनीमेशन में यह सब घोषित करने के लिए तो जैसे की आवश्यकता होगी:

div { 
    width: 50px; 
    height: 50px; 
    border: 3px solid black; 
    animation: ani1 3s 0s infinite; 
} 
@keyframes ani1 { 
    0 { background: green; } 
    10% { background: red; } 
    20% { background: green; } 
    30% { background: red; } 
    40% { background: green; } 
    50% { background: red; } 
    60% { background: green; width: 50px; } 
    70% { width: 100px; } 
    80% { width: 150px; } 
    90% { width: 100px; } 
    100% { width: 150px; } 
} 

Demo (-webkit- का उपयोग करता है क्रोम में देखने योग्य उपसर्ग)

वैकल्पिक रूप से, आप y घोषित कर सकते हैं खाई में बनाया गया एक साथ अलग से हमारे एनिमेशन ताकि दो एनिमेशन ओवरलैप नहीं है, इसलिए जैसे:

div { 
    width: 100px; 
    height: 50px; 
    border: 3px solid black; 
    animation: ani1 12s 0s infinite, ani2 12s 0s infinite; 
} 
@keyframes ani1 { 
    0%, 60%, 100% { background: white; } 
    20%, 40% { background: green; } 
    10%, 30%, 50% { background: red; } 
} 

@keyframes ani2 { 
    60%, 80%, 100% { width: 100px; } 
    70%, 90% { width: 150px; } 
} 

Demo