बदलें, जोड़ें या इकट्ठा करें? यही सवाल है.
कई ऐनिमेशन इफ़ेक्ट जोड़ना
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) का ट्रांसफ़ॉर्मेशन होगा.
Unsplash पर एलेक्स बॉयड की फ़ोटो