ट्रांजिशन और एनिमेशन

docs.scrimba.com

आप एक बटन में :hover कलर जोड़ते हैं और यह काम करता है, लेकिन बदलाव अचानक है: एक फ्रेम में यह नीला है, अगले में यह गहरा है, बीच में कुछ नहीं। एक छोटी सी फेड पूरे पेज को कम झटकेदार महसूस कराएगी। वह फेड एक ट्रांजिशन है, और एक बार जब आप दो स्टेट के बीच मोशन का वर्णन कर सकते हैं, तो वही टूल्स होवर इफेक्ट, कार्ड जो उठते हैं, और एक स्पिनर जो कुछ लोड होने के दौरान घूमता है, तक स्केल करते हैं। यह चैप्टर इस बारे में है कि CSS चीजों को कैसे मूव करता है, और उन्हें कैसे मूव करते हैं बिना पेज को उपयोग करने के लिए कठिन बनाए।

ट्रांजिशन

एक ट्रांजिशन ब्राउज़र को उसके पुरानी वैल्यू से नई वैल्यू तक एक प्रॉपर्टी को एनिमेट करने के लिए कहता है, बजाय उनके बीच स्नैप करने के। आप दो स्टेट का वर्णन करते हैं, सामान्य एक और होवर एक, और ट्रांजिशन बीच के फ्रेम को भर देता है।

यहाँ एक बटन है जो होवर पर कलर बदलता है। ट्रांजिशन के बिना कलर कूदता है; एक के साथ यह फेड होता है:

.btn {
  background: #3b82f6;
  transition: background 0.2s;   /* 0.2 सेकंड में कलर को फेड करें */
}
.btn:hover {
  background: #1d4ed8;           /* एनिमेट करने के लिए नया स्टेट */
}

आप transition को सामान्य स्टेट पर रखते हैं, :hover पर नहीं। इस तरह यह माउस के आने और जाने दोनों समय लागू होता है।

एक ट्रांजिशन एक प्रॉपर्टी को दो वैल्यूज़ के बीच एनिमेट करता है जब भी वह वैल्यू बदलती है, आमतौर पर क्योंकि :hover या :focus जैसी स्टेट किक करती है, या एक क्लास जोड़ी जाती है। आप एनिमेशन को फ्रेम दर फ्रेम वर्णित नहीं कर रहे हैं; आप प्रॉपर्टी का नाम और एक अवधि देते हैं, और ब्राउज़र बीच की वैल्यूज़ को इंटरपोलेट करता है।

transition शॉर्टहैंड के चार हिस्से हैं, इसी क्रम में: देखने के लिए प्रॉपर्टी, अवधि, टाइमिंग-फंक्शन (स्पीड कर्व), और एक वैकल्पिक विलंब।

.btn {
  background: #3b82f6;
  transition: background 0.2s ease-in-out 0s;
  /* प्रॉपर्टी | अवधि | टाइमिंग-फंक्शन | विलंब */
}
.btn:hover {
  background: #1d4ed8;
}

आप कई प्रॉपर्टीज़ को एक साथ ट्रांजिशन कर सकते हैं उन्हें कॉमा से अलग करके, और आप ट्रांजिशन को बेस स्टेट पर घोषित करते हैं ताकि यह होवर के आने और जाने दोनों को कवर करे।

.card {
  transition: transform 0.2s, box-shadow 0.2s;   /* दो प्रॉपर्टीज़, एक जैसी टाइमिंग */
}

एक ट्रांजिशन एक प्रॉपर्टी को अपनी शुरुआती और अंतिम वैल्यू के बीच समय के साथ इंटरपोलेट करता है जब भी कंप्यूटेड वैल्यू बदलती है। ट्रिगर वह प्रॉपर्टी में कोई भी बदलाव है: एक छद्मवर्ग जैसे :hover, JavaScript से टॉगल किया गया एक क्लास, या इनलाइन स्टाइल संपादन। चार उप-प्रॉपर्टीज़ हैं transition-property, transition-duration, transition-timing-function, और transition-delay, और शॉर्टहैंड उन्हें प्रॉपर्टी, अवधि, टाइमिंग, विलंब के क्रम में रखता है।

दो बाधाएं तय करती हैं कि क्या एक ट्रांजिशन बिल्कुल चलता है। प्रॉपर्टी को एनिमेटेबल होना चाहिए, मतलब इसके पास दो वैल्यूज़ के बीच एक परिभाषित इंटरपोलेशन है: background-color, opacity, और transform हैं, जबकि display जैसी प्रॉपर्टी असतत है और ऐतिहासिक रूप से स्नैप होती थी बजाय ट्वीनिंग के। और शुरुआती और अंतिम दोनों वैल्यूज़ को कंक्रीट होना चाहिए: आप auto से या तक ट्रांजिशन नहीं कर सकते, यही वजह है कि height को auto तक एनिमेट करना कुछ नहीं करता और लोग max-height या transform की ओर रुख करते हैं।

.btn {
  background: #3b82f6;
  transition: background-color 0.2s ease-in-out;   /* एनिमेटेबल, दोनों वैल्यूज़ कंक्रीट */
}
.btn:hover {
  background: #1d4ed8;
}

ट्रांजिशन को बेस नियम पर घोषित करें, :hover नियम पर नहीं। लागू किया जाने वाला ट्रांजिशन प्रॉपर्टी एलिमेंट की वर्तमान स्टेट से पढ़ी जाती है, तो इसे बेस स्टेट पर रखने का मतलब है कि यह आने और लौटने दोनों को नियंत्रित करता है; इसे केवल :hover पर रखने से होवर का तरीका एनिमेट होता है और बाहर निकलना स्नैप करता है।

Junoट्रांजिशन एक ट्रांजिशन एक बदलाव को स्नैप करने के बजाय स्मूथ करता है, जैसे होवर पर बटन के कलर को फेड करना। आप इसे सामान्य स्टेट पर लिखते हैं, :hover पर नहीं, इसलिए यह आने और वापस जाने दोनों समय काम करता है। प्रॉपर्टी और एक अवधि के साथ शुरू करें और आपके पास पहले से ही एक काम करने वाली फेड है।

Junoट्रांजिशनtransition शॉर्टहैंड प्रॉपर्टी, अवधि, टाइमिंग-फंक्शन, विलंब को पढ़ता है, और आप उन्हें कॉमा से अलग करके कई सूचीबद्ध करते हैं। इसे बेस नियम पर रखें ताकि यह स्टेट में प्रवेश करने और छोड़ने दोनों को कवर करे। यदि होवर आते समय स्मूथ दिखता है और बाहर निकलते समय कूदता है, तो ट्रांजिशन :hover पर है बजाय बेस पर, जो लोगों को अक्सर पकड़ता है।

Junoट्रांजिशन एक ट्रांजिशन केवल एनिमेटेबल प्रॉपर्टीज़ पर चलता है जिनके दो कंक्रीट अंतिम वैल्यूज़ हैं, यही वजह है कि height: auto तक ट्रांजिशन करना चुप्पी से कुछ नहीं करता। घोषणा को बेस स्टेट पर रखें ताकि यह दोनों दिशाओं को नियंत्रित करे बजाय बाहर निकलने पर स्नैप करने के। एक बार जब आप चार उप-प्रॉपर्टीज़ जानते हैं, तो शॉर्टहैंड केवल उनका क्रम है: प्रॉपर्टी, अवधि, टाइमिंग, विलंब।

ट्रांसफॉर्म

एक ट्रांसफॉर्म एक एलिमेंट को मूव करता है, स्केल करता है, या घुमाता है बिना अपने चारों ओर की कोई चीज़ को बाधित किए। यह वह चीज़ है जिसे आप आमतौर पर एनिमेट करना चाहते हैं, क्योंकि यह स्मूथ दिखता है और पड़ोसियों को धकेलता नहीं है।

तीन हैं जिन्हें आप लगातार इस्तेमाल करेंगे:

.card:hover {
  transform: translateY(-4px);   /* 4 पिक्सेल ऊपर मूव करें */
}
.icon:hover {
  transform: scale(1.1);         /* अपने आकार के 110% तक बढ़ें */
}
.arrow.open {
  transform: rotate(90deg);      /* एक चौथाई मोड़ दक्षिणावर्त घुमाएं */
}

translate मूव करता है, scale रिसाइज़ करता है, और rotate घुमाता है। इनमें से किसी को भी ट्रांजिशन के साथ जोड़ें और आपको एक कार्ड मिलता है जो उठता है, एक आइकन जो पॉप करता है, या एक तीर जो खुलता है।

transform एक एलिमेंट पर एक विज़ुअल बदलाव लागू करता है, इसे मूव करते हुए, रिसाइज़ करते हुए, या घुमाते हुए, बिना लेआउट में इसकी जगह को बदले। वह आखिरी हिस्सा मुद्दा है: एक ट्रांसफॉर्मड एलिमेंट एक नई स्थिति में पेंट किया जाता है, लेकिन जो जगह यह मूल रूप से ले रहा था वह आरक्षित रहती है, इसलिए इसके पड़ोसी रीफ्लो नहीं करते। यह है कि क्यों transform वह प्रॉपर्टी है जिसे आप top या margin के बजाय मूवमेंट के लिए एनिमेट करते हैं।

तीन जो आप सबसे अधिक उपयोग करते हैं वे हैं translate(), scale(), और rotate(), और आप उन्हें एक घोषणा में जोड़ सकते हैं:

.card {
  transition: transform 0.2s ease-out;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);   /* उठाएं और थोड़ा बढ़ें */
}

फंक्शन बाएं से दाएं लागू होते हैं, और transform-origin वह बिंदु सेट करता है जिसके चारों ओर वे पिवट करते हैं, जिसका डिफ़ॉल्ट एलिमेंट का केंद्र है। इसे top left में बदलें और एक rotate कोने से झूलता है।

.badge {
  transform-origin: top left;
  transform: rotate(-8deg);
}

transform एक एलिमेंट को अपनी खुद की पेंटेड लेयर में रीपोजिशन करता है बिना डॉक्यूमेंट फ्लो को प्रभावित किए: बॉक्स की मूल जगह आरक्षित रहती है, इसलिए कोई भाई-बहन रीफ्लो नहीं करता है और कोई लेआउट ट्रांसफॉर्म बदलते समय दोबारा कंप्यूट नहीं होता है। यह वह प्रॉपर्टी है जो transform को एनिमेट करने के लिए सही चीज़ बनाता है, एक बिंदु जो नीचे परफॉर्मेंस पर Deep Dive सटीक करता है।

translate(), scale(), और rotate() सामान्य फंक्शन हैं, और क्रम महत्वपूर्ण है क्योंकि वे मैट्रिक्स गुणन के रूप में रचित होते हैं जो असर में दाएं से बाएं लागू होते हैं: translateX(50px) rotate(45deg) चलता है फिर घुमाया गया एलिमेंट को घुमाता है, जबकि रिवर्स पहले घुमाता है फिर घुमाए गए अक्षों के साथ अनुवाद करता है, एक अलग परिणाम देता है। transform-origin scale और rotate के लिए पिवट सेट करता है, एलिमेंट का केंद्र डिफ़ॉल्ट करता है (50% 50%)।

.panel {
  transform-origin: top center;
  transition: transform 0.25s ease-out;
}
.panel.collapsed {
  transform: scaleY(0);          /* शीर्ष किनारे की ओर ढह जाता है */
}

एक व्यावहारिक बाधा: transform केवल एलिमेंट पर लागू होता है जो एक बॉक्स उत्पन्न करता है जिसे आप इस तरह से स्थिति दे सकते हैं, इसलिए इसका नंगे <span> जैसे इनलाइन एलिमेंट पर कोई प्रभाव नहीं है। पहले एलिमेंट को display: inline-block या block दें। यदि आप एलिमेंट को भी पोजिशन कर रहे हैं, तो नोट करें कि ट्रांसफॉर्म कैसे पोजिशनिंग संदर्भों के साथ इंटरैक्ट करते हैं, क्योंकि एक ट्रांसफॉर्मड एलिमेंट अपने बिल्कुल पोजिशन्ड डिसेंडेंट्स के लिए एक कंटेनिंग ब्लॉक बन जाता है।

Junoट्रांसफॉर्मtransform एक एलिमेंट को मूव करता है, स्केल करता है, या घुमाता है बिना अपने पड़ोसियों को धकेले। तीन को याद रखना हैं translate को मूव करने के लिए, scale को रिसाइज़ करने के लिए, और rotate को घुमाने के लिए। इसे ट्रांजिशन के साथ जोड़ें और आपको एक कार्ड मिलता है जो उठता है या एक आइकन जो होवर पर पॉप करता है।

Junoट्रांसफॉर्मtransform बदलता है कि एक एलिमेंट कैसे दिखता है बिना बदले कि वह लेआउट में कहां बैठता है, इसलिए पड़ोसी कभी रीफ्लो नहीं करते, यही वजह है कि आप top या margin के बजाय इसे एनिमेट करते हैं। एक घोषणा में translate, scale, और rotate को स्टैक करें और वे बाएं से दाएं लागू होते हैं। जब आप चाहते हैं कि एक रोटेट या स्केल केंद्र के अलावा कहीं पिवट करे तो transform-origin के लिए पहुंचें।

Junoट्रांसफॉर्म ट्रांसफॉर्म फंक्शन क्रम में रचित होते हैं, इसलिए translateX(50px) rotate(45deg) रिवर्स जैसा नहीं है, और transform-origin सेट करता है कि एक रोटेट या स्केल किसके चारों ओर पिवट करता है। यह नंगे इनलाइन एलिमेंट पर कुछ नहीं करता जब तक आप इसे inline-block नहीं बनाते। ध्यान में रखें यह एलिमेंट को बिल्कुल पोजिशन्ड बच्चों के लिए एक कंटेनिंग ब्लॉक में भी बदल देता है, जो बाद में आपको आश्चर्य कर सकता है।

कीफ्रेम एनिमेशन

एक ट्रांजिशन दो स्टेट के बीच एनिमेट करता है। जब आपको दो से अधिक की जरूरत हो, या आपको मोशन को दोहराने की जरूरत हो, तो आप एक कीफ्रेम एनिमेशन का उपयोग करते हैं। आप @keyframes के साथ कदम लिखते हैं, फिर उन्हें animation प्रॉपर्टी के साथ एक एलिमेंट से जोड़ते हैं।

एक लोडिंग स्पिनर क्लासिक उदाहरण है: यह हमेशा घूमता है, इसलिए एक ट्रांजिशन इसे नहीं कर सकता।

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;   /* स्पिन चलाएं, प्रति टर्न 1s, हमेशा के लिए */
}

from शुरुआत है और to अंत है। animation लाइन कहती है कि कौन से कीफ्रेम चलाएं, एक चक्र कितना लंबा ले, स्पीड कर्व, और कितनी बार दोहराएं। infinite का मतलब यह कभी नहीं रुकता है।

@keyframes एक नामांकित चरणों का अनुक्रम परिभाषित करता है, और animation प्रॉपर्टी इसे एक एलिमेंट पर चलाती है। एक ट्रांजिशन के विपरीत, एक एनिमेशन को इसे ट्रिगर करने के लिए एक स्टेट परिवर्तन की आवश्यकता नहीं होती है, यह अपने आप शुरू होता है, और इसमें जितने चाहें उतने कदम हो सकते हैं, 0% से 100% तक प्रतिशत का उपयोग करते हुए।

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }   /* मध्यबिंदु कदम */
  100% { transform: scale(1); }
}
.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

animation शॉर्टहैंड कई उप-प्रॉपर्टीज़ को बंडल करता है: नाम, अवधि, टाइमिंग-फंक्शन, विलंब, इटरेशन-काउंट, और दिशा। infinite हमेशा के लिए लूप करता है, एक संख्या वह कई बार चलाता है, और एक दिशा के रूप में alternate प्रत्येक चक्र को रिवर्स करता है ताकि मोशन शुरुआत में कूदने के बजाय आगे और पीछे चले।

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes प्रतिशत के रूप में व्यक्त किए गए बिंदुओं पर प्रॉपर्टी वैल्यूज़ की एक नामांकित टाइमलाइन घोषित करता है (from और to क्रमशः 0% और 100% के लिए उपनाम हैं), और animation वह टाइमलाइन एक एलिमेंट से बांधता है। एक एनिमेशन स्व-ट्रिगरिंग है और लूप कर सकता है, जो यह लाइन एक ट्रांजिशन के बीच है: एक स्टेट परिवर्तन को स्मूथ करने के लिए ट्रांजिशन का उपयोग करें, अपने आप पर चलने वाली या दोहराई जाने वाली मोशन के लिए एनिमेशन का उपयोग करें।

animation शॉर्टहैंड आठ उप-प्रॉपर्टीज़ ले जाता है: animation-name, -duration, -timing-function, -delay, -iteration-count, -direction, -fill-mode, और -play-state। इनमें से दो लोगों को पकड़ते हैं। animation-fill-mode: forwards एलिमेंट को एनिमेशन समाप्त होने के बाद अपनी अंतिम कीफ्रेम को होल्ड करता है, बजाय अपनी बिना-एनिमेटेड स्टाइल में स्नैप करने के, जो एक-बार प्रवेश के लिए वो है जो आप चाहते हैं। और टाइमिंग-फंक्शन प्रति कीफ्रेम सेगमेंट लागू होता है, पूरे एनिमेशन में नहीं, इसलिए एक तीन-कदम एनिमेशन पर ease-in-out प्रत्येक सेगमेंट में इन और आउट ईज़ करता है, अंत तक एक बार नहीं।

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast {
  animation: slide-in 0.3s ease-out forwards;   /* अंत स्टेट को होल्ड करता है */
}

कीफ्रेम के अंदर transform और opacity एनिमेट करना पसंद करें उसी कारण से ट्रांजिशन करते हैं, एक बिंदु जो अगले सेक्शन अनपैक करता है: वे दोनों प्रॉपर्टीज़ सस्ती हैं एनिमेट करने के लिए और अधिकांश अन्य नहीं हैं।

Junoकीफ्रेम एनिमेशन जब दो स्टेट काफी नहीं हैं, या मोशन को दोहराने की जरूरत है, तो @keyframes में कदम लिखें और animation के साथ चलाएं। एक स्पिनर जाने के लिए go-to उदाहरण है: from 0 डिग्री पर, to 360 पर, infinite के साथ लूप करना। animation लाइन कौन से कीफ्रेम, कितना लंबा, कर्व, और कितनी बार सेट करती है।

Junoकीफ्रेम एनिमेशन@keyframes प्रतिशत के रूप में कदम रखता है और animation उन्हें चलाता है, कोई स्टेट परिवर्तन की जरूरत नहीं। शॉर्टहैंड नाम, अवधि, टाइमिंग, विलंब, इटरेशन-काउंट, और दिशा को पैक करता है, इसलिए infinite लूप करता है और alternate प्रत्येक चक्र को आगे और पीछे चलाता है। बहु-कदम मोशन और कुछ भी जो दोहराता है यहां है, ट्रांजिशन में नहीं।

Junoकीफ्रेम एनिमेशन टाइमिंग-फंक्शन प्रति कीफ्रेम सेगमेंट चलता है, पूरे एनिमेशन में एक बार नहीं, जो लोगों को पहली बार आश्चर्य करता है जब एक इज़्ड बहु-कदम दौड़ खुरदुरा दिखता है। जब एक-बार प्रवेश अपने अंत स्टेट को होल्ड करना चाहिए तो animation-fill-mode: forwards के लिए पहुंचें। और जहां आप कर सकते हैं कीफ्रेम को transform और opacity पर रखें, आने वाले परफॉर्मेंस कारण के लिए।

मोशन जो उपयोगकर्ता का सम्मान करता है

हर कोई स्क्रीन पर मोशन नहीं चाहता। कुछ लोगों को यह विचलित करने वाला लगता है, और कुछ के लिए यह असली असुविधा या मतली का कारण बन सकता है। ब्राउज़र लोगों को इसे कम करने के लिए अपनी सिस्टम सेटिंग्स में पूछने देते हैं, और CSS इसे प्रीफर्स-रिडिउस्ड-मोशन के साथ पढ़ सकता है।

अपनी एनिमेशन को एक चेक में लपेटें ताकि वे केवल लोगों के लिए चलें जिन्होंने मोशन को बंद करने के लिए नहीं कहा है:

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.2s;
  }
}

उपयोगकर्ता का सम्मान करने का दूसरा आधा हिस्सा संयम है: मोशन को छोटा, सूक्ष्म, और किसी ऐसी चीज़ से जुड़ा हुआ रखें जो पाठक ने किया हो, जैसे होवर या क्लिक। मोशन जो वास्तविक परिवर्तन पर ध्यान आकर्षित करता है मदद करता है; अपने आप के लिए मोशन तेजी से थक जाता है।

मोशन तटस्थ नहीं है। कुछ पाठकों के लिए, एनिमेशन एक विचलन है, और वेस्टिबुलर स्थितियों वाले लोगों के लिए, बड़ी या अचानक मोशन चक्कर आना या मतली को ट्रिगर कर सकता है। ऑपरेटिंग सिस्टम एक "मोशन कम करें" सेटिंग उजागर करता है, और prefers-reduced-motion मीडिया फीचर आपके CSS को इसे सम्मान करने देता है।

मोशन को opt-in मानें, opt-out नहीं। शांत बेसलाइन को अपने डिफ़ॉल्ट के रूप में लिखें, फिर no-preference क्वेरी के अंदर मोशन लेयर करें:

.card {
  transition: none;              /* सभी के लिए शांत डिफ़ॉल्ट */
}
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.2s ease-out;
  }
}

मीडिया क्वेरी से परे, उद्देश्य अच्छे मोशन को शोर से अलग करता है। मोशन अपनी जगह अर्जित करता है जब यह परिवर्तन की व्याख्या करता है: एक मेनू जो किनारे से स्लाइड करता है जिससे यह एंकर किया गया है, एक टोस्ट जो फेड करता है ताकि यह कहीं से दिखाई न दे। तेज़ और सूक्ष्म पॉलिश के रूप में पढ़ता है; धीमा और बड़ा बाधा के रूप में पढ़ता है।

prefers-reduced-motion एक मीडिया फीचर है जो एक एक्सेसिबिलिटी सेटिंग को दर्शाता है जो पाठक ने OS स्तर पर चुना था, और इसे सम्मान करना एक बेसलाइन आवश्यकता है, नहीं एक सौजन्य, क्योंकि अबोली मोशन वेस्टिबुलर असुविधा का कारण बन सकता है। पैटर्न को पहुंचना है कम किए गए स्टेट को डिफ़ॉल्ट के रूप में लेखक करना और @media (prefers-reduced-motion: reduce) के अंदर मोशन को सक्षम करना, ताकि एक पाठक जिसका ब्राउज़र फीचर को सपोर्ट नहीं करता है अभी भी शांत बेसलाइन को प्राप्त करता है मोशन के बजाय।

"कम करें" शायद ही कभी "निकालें" मतलब। एक फेड या कलर परिवर्तन आमतौर पर ठीक है जब स्लाइड या स्केल नहीं है, इसलिए उपयोगी कदम बड़े पोजिशनल मोशन को छोटे ऑपेसिटी परिवर्तन के लिए स्वैप करना है बजाय सभी फीडबैक को मारने के:

.modal {
  animation: slide-in 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .modal {
    animation: fade-in 0.3s ease-out;   /* फीडबैक रखें, मूवमेंट छोड़ें */
  }
}

उद्देश्य और ईज़िंग बाकी को ले जाता है। प्रवेश ease-out के साथ सर्वश्रेष्ठ पढ़ते हैं, जो तेजी से शुरू करते हैं और शांत करते हैं, क्योंकि एलिमेंट इरादे के साथ पहुंचता है और आराम पर आता है; निकास अक्सर ease-in सूट करते हैं। अवधि को छोटा रखें (इंटरफेस फीडबैक के लिए मोटे तौर पर 150ms से 300ms) और मोशन को छोटा; एक सामान्य विफलता एक अच्छी एनिमेशन है जो हर इंटरैक्शन के लिए एक चौथाई-सेकंड की प्रतीक्षा जोड़ता है। मोशन को स्टेट परिवर्तन को स्पष्ट करना चाहिए, एक को सजाना नहीं।

Junoमोशन जो उपयोगकर्ता का सम्मान करता है कुछ लोगों को मोशन विचलित करने वाली या यहां तक कि शारीरिक रूप से असुविधाजनक लगती है, और वे ब्राउज़र से इसे कम करने के लिए पूछ सकते हैं। prefers-reduced-motion के साथ पढ़ें और केवल लोगों के लिए एनिमेशन चलाएं जिन्होंने मोशन को बंद नहीं किया है। मोशन को छोटा, सूक्ष्म, और पाठक ने जो किया उससे जुड़ा हुआ रखें।

Junoमोशन जो उपयोगकर्ता का सम्मान करता है शांत संस्करण को अपने डिफ़ॉल्ट के रूप में लेखक करें और एक no-preference क्वेरी के अंदर मोशन जोड़ें, इसलिए मोशन opt-in है बजाय किसी चीज़ के जो लोगों को लड़ना पड़ता है। अच्छा मोशन परिवर्तन की व्याख्या करता है, जैसे एक मेनू अपने एंकर से स्लाइड करना; सजावट के लिए मोशन तेजी से पहनता है। तेज़ और छोटा पॉलिश के रूप में पढ़ता है, धीमा और बड़ा बाधा के रूप में।

Junoमोशन जो उपयोगकर्ता का सम्मान करता है कम करें शायद ही कभी हटाएं का मतलब: एक फेड के लिए एक स्लाइड स्वैप करें ताकि लोगों जिन्होंने कम मोशन के लिए पूछा था अभी भी फीडबैक मिले, और शांत स्टेट को डिफ़ॉल्ट करें ताकि असमर्थित ब्राउज़र वहां भी उतरें। प्रवेश के लिए ease-out का उपयोग करें और इंटरफेस फीडबैक को 150 से 300 मिलीसेकंड के चारों ओर रखें। एक अच्छी एनिमेशन जो हर क्लिक में प्रतीक्षा जोड़ता है एक विशेषता नहीं है, लागत है।

क्या एनिमेट करें, और क्यों यह महत्वपूर्ण है

एक त्वरित नियम जो आपको बाद में परेशानी से बचाएगा: जब आप मूवमेंट एनिमेट करते हैं, तो transform और opacity एनिमेट करें, width, height, top, या margin जैसी प्रॉपर्टीज़ नहीं।

/* स्मूथ: ब्राउज़र इन्हें सस्ते में संभालता है */
.card:hover {
  transform: translateY(-4px);
  opacity: 0.9;
}

कारण यह है कि transform और opacity दो प्रॉपर्टीज़ हैं जिन्हें ब्राउज़र सबसे सस्ते में घुमा सकता है, इसलिए उन पर बनी एनिमेशन धीमे उपकरणों पर भी स्मूथ रहती है। आकार या स्थिति प्रॉपर्टीज़ को एनिमेट करना ब्राउज़र को हर फ्रेम पर अधिक काम करने के लिए करता है, और मोशन हकदार हो सकता है। आप जब गहरे जाएंगे तब पूर्ण कारण मिलेंगे, लेकिन आदत अभी बनाने लायक है।

एक कारण है कि इस चैप्टर में उदाहरण transform और opacity पर झुकते हैं। वे दो प्रॉपर्टीज़ एनिमेट करने के लिए सबसे सस्ती हैं, और अधिकांश अन्य नहीं हैं। width, height, top, या margin को एनिमेट करना ब्राउज़र को हर फ्रेम पर लेआउट की पुनर्गणना करने के लिए करता है, जो महंगा है और धीमे उपकरणों पर हकदार के रूप में दिखाई देता है।

व्यावहारिक नियम यह है कि मूवमेंट को transform और opacity के रूप में व्यक्त करें जहां आप कर सकते हैं। कुछ मूव करना चाहते हैं? top नहीं, translate का उपयोग करें। इसे रिसाइज़ करना चाहते हैं? width नहीं, scale का उपयोग करें। क्या यह प्रकट होना चाहिए? opacity को फेड करें, शून्य से height एनिमेट न करें।

/* महंगा: लेआउट प्रॉपर्टी को एनिमेट करना */
.panel {
  transition: height 0.3s;       /* हर फ्रेम पर लेआउट की पुनर्गणना करता है */
}

/* सस्ता: एक जैसा असर, ट्रांसफॉर्म के रूप में व्यक्त */
.panel {
  transition: transform 0.3s;
  transform: scaleY(0);          /* कोई लेआउट काम नहीं */
}

यह वापस जाता है कि क्यों transform अपने पड़ोसियों को बाधित नहीं करता है: क्योंकि यह कभी लेआउट को नहीं छूता है, ब्राउज़र इसे एनिमेट कर सकता है बिना पेज को फिर से किए। यदि आप एक कलर या बैकग्राउंड ट्रांजिशन भी पहुंच रहे हैं, तो कलर और बैकग्राउंड कवर करता है कि उनमें से कौन से इंटरपोलेट करते हैं।

यह Deep Dive है जो पहले अनुभाग पर इशारा करता था: क्यों transform और opacity एनिमेट करने के लिए सस्ते हैं और लगभग सब कुछ और नहीं। यह ब्राउज़र की रेंडरिंग पाइपलाइन तक आता है, जो तीन चरणों में चलता है। Layout प्रत्येक बॉक्स के आकार और स्थिति की गणना करता है। Paint पिक्सेल भरता है: कलर, टेक्स्ट, बॉर्डर। Composite पेंटेड लेयर को अंतिम फ्रेम में असेम्बल करता है, और यह वह चरण है जिसे GPU चला सकता है।

transform या opacity एनिमेट करना पूरी तरह से कंपोजिट चरण में किया जा सकता है। ब्राउज़र एलिमेंट को एक बार पेंट करता है, इसे अपनी खुद की कंपोजिटर लेयर में प्रचार करता है (एक अलग से पेंट की गई सतह जिसे GPU स्वतंत्र रूप से घुमा और मिश्रण कर सकता है), और फिर हर फ्रेम केवल उस लेयर को एक नई स्थिति या ऑपेसिटी पर री-कंपोजिट करता है। कोई लेआउट, कोई रीपेंट। width या top एनिमेट करने के बजाय लेआउट को अमान्य करता है, ब्राउज़र को हर एक फ्रेम पर ज्यामिति की पुनर्गणना और रीपेंट करने के लिए करता है, जो लोड के तहत फ्रेम में गिरता है।

/* कंपोजिट-केवल: सस्ता, GPU-फ्रेंडली */
.card {
  transition: transform 0.2s, opacity 0.2s;
}

/* हर फ्रेम लेआउट और पेंट को ट्रिगर करता है: इन्हें एनिमेट करने से बचें */
.card-heavy {
  transition: width 0.2s, top 0.2s;
}

will-change आपको संकेत देता है कि एक प्रॉपर्टी एनिमेट होने वाली है ताकि ब्राउज़र लेयर को समय से पहले प्रचार कर सके: will-change: transform। इसे कम से कम उपयोग करें और एनिमेशन समाप्त होने के बाद इसे हटाएं, क्योंकि प्रत्येक प्रचारित लेयर मेमोरी खर्च करता है, और सब कुछ प्रचार करना उद्देश्य को हराता है और पेज को धीमा कर सकता है। इसे एक मापी गई हकदार के लिए लक्षित फिक्स के रूप में मानें, डिफ़ॉल्ट के रूप में नहीं।

ईज़िंग सूचीबद्ध करने के लिए दूसरा लीवर लायक है। टाइमिंग-फंक्शन एक वक्र है जो बीता हुआ समय को प्रगति तक मैप करता है। ease-out (तेज़ फिर धीमा) प्रवेश के लिए सूट करता है क्योंकि एलिमेंट पहुंचता है और शांत करता है; ease-in निकास के लिए सूट करता है; linear एक स्पिनर जैसी निरंतर मूवमेंट के लिए सूट करता है। कुछ भी कस्टम के लिए, cubic-bezier(x1, y1, x2, y2) अपने दो नियंत्रण बिंदुओं द्वारा वक्र को परिभाषित करता है, और बिल्ट-इन कीवर्ड नीचे नामांकित क्यूबिक-बेज़ियर हैं। एक परफॉर्मेंस बजट को ध्यान में रखें: एक फ्रेम के समय के भीतर रहने का लक्ष्य रखें (60fps पर लगभग 16ms), कंपोजिट-केवल प्रॉपर्टीज़ एनिमेट करें, और will-change के लिए पहुंचने से पहले प्रोफाइलर के लिए पहुंचें। यदि आप कस्टम प्रॉपर्टीज़ से इनमें से कई चलाते हैं, तो आप पूरे इंटरफेस में अवधि और ईज़िंग को सुसंगत रख सकते हैं।

Junoक्या एनिमेट करें, और क्यों यह महत्वपूर्ण हैtransform और opacity एनिमेट करें, और width, height, top, या margin को एनिमेट करने से दूर रहें। वे दो ब्राउज़र के लिए सस्ते में चलाने के लिए हैं, इसलिए मोशन धीमे उपकरणों पर भी स्मूथ रहता है। आप बाद में पूर्ण क्यों जानेंगे, लेकिन आदत अभी शुरू करने लायक है।

Junoक्या एनिमेट करें, और क्यों यह महत्वपूर्ण है मूवमेंट को transform और opacity के रूप में व्यक्त करें: top के बजाय translate का उपयोग करें, width के बजाय scale, और शून्य से height एनिमेट करने के बजाय opacity को फेड करें। लेआउट प्रॉपर्टीज़ को एनिमेट करना ब्राउज़र को हर फ्रेम पर लेआउट को फिर से करने के लिए करता है, जो धीमे उपकरणों पर हकदार करता है। यह वही कारण है कि transform पड़ोसियों को अकेला छोड़ता है: यह कभी लेआउट को छूता नहीं है।

Junoक्या एनिमेट करें, और क्यों यह महत्वपूर्ण हैtransform और opacity अपनी खुद की GPU लेयर पर कंपोजिट चरण में एनिमेट कर सकते हैं, इसलिए वे लेआउट और पेंट को छोड़ देते हैं; width और top हर फ्रेम पर लेआउट को अमान्य करते हैं और लोड के तहत फ्रेम में गिरते हैं। will-change को एक मापी गई हकदार के लिए लक्षित फिक्स के रूप में उपयोग करें और हटाएं, क्योंकि प्रत्येक प्रचारित लेयर मेमोरी खर्च करता है। ईज़िंग को इशारे से मिलाने के लिए चुनें, ease-out प्रवेश के लिए, और अनुकूल करने से पहले प्रोफाइल करें।