animation-composition प्रॉपर्टी का इस्तेमाल करके, ऐनिमेशन के कई इफ़ेक्ट को एक साथ जोड़ना

Bramus

animation-composition प्रॉपर्टी की मदद से, यह कंट्रोल किया जा सकता है कि एक ही प्रॉपर्टी पर एक साथ कई ऐनिमेशन लागू होने पर क्या होना चाहिए.

मान लें कि आपने किसी एलिमेंट पर यह बेस ट्रांसफ़ॉर्म लागू किया है:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

साथ ही, मान लें कि आपके पास कीफ़्रेम का यह सेट भी है:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

किसी एलिमेंट पर ये कीफ़्रेम लागू करने पर, to कीफ़्रेम में मौजूद transform, मौजूदा transform की जगह ले लेता है. यह डिफ़ॉल्ट व्यवहार है.

animation-composition की मदद से, अब आपके पास यह कंट्रोल करने का विकल्प है कि डिफ़ॉल्ट replace के बजाय क्या होना चाहिए. स्वीकार की गई वैल्यू ये हैं:

• replace: इफ़ेक्ट की वैल्यू, मौजूदा वैल्यू की जगह ले लेती है. (डिफ़ॉल्ट)
• add: इफ़ेक्ट की वैल्यू, मौजूदा वैल्यू में जुड़ जाती है.
• accumulate: इफ़ेक्ट की वैल्यू, मौजूदा वैल्यू के साथ जुड़ जाती है.

वैल्यू जोड़ने और इकट्ठा करने में मामूली अंतर होता है. उदाहरण के लिए, blur(2) और blur(3) इन दो वैल्यू को लें. इन दोनों को जोड़ने पर blur(2) blur(3) मिलेगा. वहीं, इकट्ठा करने पर blur(5) मिलेगा.

इसकी तुलना चाय से भरे कप से की जा सकती है. इसमें दूध डालने पर यह होगा:

• replace: चाय हट जाएगी और उसकी जगह दूध आ जाएगा.
• add: दूध कप में जुड़ जाएगा, लेकिन यह चाय के ऊपर परत के तौर पर रहेगा.
• accumulate: दूध चाय में जुड़ जाएगा. चूंकि, दोनों तरल हैं, इसलिए वे अच्छी तरह से मिक्स हो जाएंगे.

डेमो

डेमो में, तीन ग्रे बॉक्स हैं. इन पर, बेस transform और animation लागू किया गया है.

इन बॉक्स पर एक ही ऐनिमेशन लागू है. हालांकि, इनसे अलग-अलग नतीजे मिलते हैं, क्योंकि इनमें animation-composition की अलग-अलग वैल्यू सेट की गई हैं:

पहले बॉक्स के लिए, animation-composition: replace सेट किया गया है. यह डिफ़ॉल्ट व्यवहार है. अपनी आखिरी पोज़िशन में, transform के लिए ओरिजनल translateX(50px) rotate(45deg) वैल्यू की जगह translateX(100px) वैल्यू आ जाती है.

दूसरे बॉक्स के लिए, animation-composition: add सेट किया गया है. अपनी आखिरी पोज़िशन में, translateX(100px) को ओरिजनल translateX(50px) rotate(45deg), में जोड़ा जाता है. इससे translateX(50px) rotate(45deg) translateX(100px) मिलता है. इससे बॉक्स 50 पिक्सल आगे बढ़ता है. इसके बाद, 45 डिग्री घूमता है. फिर 100 पिक्सल आगे बढ़ता है.

तीसरे बॉक्स के लिए, animation-composition: accumulate सेट किया गया है. अपनी आखिरी पोज़िशन में, translateX(100px) को ओरिजनल ट्रांसफ़ॉर्म के translateX(50px) में गणित के हिसाब से जोड़ा जाएगा. इससे translateX(150px) rotate(45deg) का ट्रांसफ़ॉर्मेशन मिलेगा.