क्या ट्रांसफॉर्म विकल्पों के लिए अलग-अलग अवधि/देरी सेट करना संभव है?

Question

मैं अपने एचटीएमएल ऑब्जेक्ट के लिए कई बदलाव विकल्प सेट करना चाहता हूं लेकिन अलग-अलग अवधि और देरी के साथ।

तो मैं ऐसा ही कुछ इस्तेमाल करने की कोशिश:

-webkit-transition: -webkit-transform, opacity; 
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms; 

तो मैं बदलने और अस्पष्टता के लिए अलग-अलग समय समारोह होगा, लेकिन मैं घुमाने और पैमाने, उदा के लिए विभिन्न विकल्पों सेट कर सकते हैं 10s और स्केल 20s के लिए घुमाएं?

Answer 1

शायद सीधे नहीं, लेकिन उसी प्रभाव को nesting elements द्वारा हासिल किया जा सकता है।

Answer 2

हाँ आप इसे CSS3 एनीमेशन के साथ सीधे कर सकते हैं। यदि आपके पास 0 से 1 तक एक अस्पष्टता परिवर्तन है जो 20 सेकंड तक चलता है, और 90 डिग्री रोटेशन जो 10 सेकंड तक रहता है, तो आप अस्पष्टता के साथ 10 सेकंड पर एक कीफ्रेम बनाते हैं। 5 और रोटेशन 90 डिग्री और 20 सेकंड में एक और कीफ्रेम अस्पष्टता 1 के साथ और घूर्णन 90 डिग्री। यह दर्द का प्रकार है, लेकिन यह काम करेगा। divs घोंसला बनाने से थोड़ा क्लीनर है (डौग ऊपर का कहना है के रूप में)

यहाँ ठीक कोड है:

@-webkit-keyframes foo { 
0% { 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
    opacity: 0; 
} 
50% { 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
    opacity: 0.5; 
} 

100% { 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg); 
    opacity: 1; 
} 

और आप अपने HTML में

-webkit-animation-duration: 20s; 

डाल चाहते हैं।

Answer 3

ऐसा करने में समस्या होगी जैसे डौग ने कहा कि अगर आपके एनीमेशन में 3 डी परिप्रेक्ष्य है। शायद आप "ट्रांसफॉर्म-स्टाइल: संरक्षित-3 डी" का उपयोग कर सकते हैं लेकिन यह आईई 10-11 में काम नहीं करता है और फ़ायरफ़ॉक्स से बाहर के सभी अन्य ब्राउज़रों में अजीब काम करता है। तो मुझे लगता है कि एकमात्र समाधान CSS3 एनिमेशन का उपयोग करना है। आपके मामले में यह होगा:

@-webkit-keyframes rotate_scale { 

    0% { 
     -webkit-transform: rotate(0deg) scale(0); 
    } 
    50% { 
     -webkit-transform: rotate(90deg) scale(0); 
    } 
    100% { 
     -webkit-transform: rotate(180deg) scale(2); 
    } 
} 
@keyframes rotate_scale { 

    0% { 
     transform: rotate(0deg) scale(0); 
    } 
    50% { 
     transform: rotate(90deg) scale(0); 
    } 
    100% { 
     transform: rotate(180deg) scale(2); 
    } 
} 

तो आप अपने परिवर्तनों की सबसे लंबी अवधि निर्धारित कर सकते हैं। उदाहरण के लिए रोटेशन के लिए 20 सेकंड: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; और फिर गणना करें कि आपका दूसरा रूपांतरण कब शुरू होगा। घूर्णन के बाद दस सेकंड में परीक्षा पैमाने में शुरू होता है। तो यह पूर्णकालिक (50%) का आधा होगा। और यह पूर्णकालिक (100%) के अंत तक 10 सेकंड तक टिकेगा। लेकिन यदि आप स्केल अवधि 5 सेकंड बनाना चाहते हैं उदाहरण के लिए आपको नया कीफ्रेम 75% { transform: rotate(135deg) scale(2); } जोड़ना होगा और दो रूपांतरणों को लिखना होगा।