ट्रांज़िशन और एनिमेशन: @keyframes, transform, टाइमिंग

transform और opacity के साथ कंपोज़िटर पर एनिमेट करें, अपने @keyframes को संरचित करें, और उपयोगकर्ताओं की मोशन प्राथमिकताओं का सम्मान करें।

10 मिनट · 3 प्रश्न

क्या एनिमेट करना है यह चुनने से पहले, रेंडरिंग पाइपलाइन को याद करें: layout (ज्यामिति), paint (पिक्सेल), composite (GPU पर लेयरों को जोड़ना)। width या top को एनिमेट करना हर फ़्रेम पर एक लेआउट ट्रिगर करता है, जिसके बाद अक्सर एक पेंट होता है: यही 60 fps से नीचे जैंक (झटके) का नुस्खा है। transform और opacity को सीधे कंपोज़िटर द्वारा संभाला जाता है, पहले दो चरणों में वापस गए बिना। पेशेवर नियम: जब भी संभव हो केवल इन दो प्रॉपर्टीज़ को एनिमेट करें, और बाकी का अनुकरण करें (top के बजाय translate, width के बजाय scale)।

.button {
  transform: translateY(0);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.15s ease-out;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.97);
}

जब एक ट्रांज़िशन अब पर्याप्त नहीं होता (मध्यवर्ती चरण, लूपिंग, स्वचालित शुरुआत), तो @keyframes की ओर बढ़ें। दो सेटिंग्स एक साफ़ एनिमेशन और एक दृश्य बग के बीच अंतर पैदा करती हैं: animation-fill-mode शुरुआत से पहले की स्थिति को नियंत्रित करता है (backwards देरी के दौरान पहला कीफ़्रेम लागू करता है) और अंत के बाद की स्थिति को (forwards अंतिम को फ्रीज़ कर देता है); both दोनों को जोड़ता है। यह भी ध्यान दें कि टाइमिंग फ़ंक्शन कीफ़्रेम के हर जोड़े के बीच लागू होता है, न कि कुल अवधि पर: आप इसे किसी कीफ़्रेम के भीतर फिर से परिभाषित कर सकते हैं।

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  70% {
    transform: translateX(8px);
    opacity: 1;
  }
  to {
    transform: translateX(0);
  }
}

.toast {
  animation: slide-in 0.35s ease-out both;
}

जानने योग्य दो पूरक उपकरण। will-change: transform एनिमेशन से पहले तत्व को अपनी खुद की लेयर पर प्रमोट कर देता है, एक देर से होने वाले रास्टर से बचते हुए; लेकिन हर लेयर GPU मेमोरी खर्च करती है, इसलिए इसे एनिमेशन से ठीक पहले लागू करें और बाद में हटा दें, कभी भी दर्जनों तत्वों पर स्थायी स्टाइल के रूप में नहीं। steps(n) निरंतर इंटरपोलेशन को असतत छलांगों से बदल देता है: स्प्राइट्स, टाइपराइटर-शैली के कर्सर, या घड़ियों के लिए आवश्यक।

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. एक एनिमेटेड गति के लिए left: 100px के बजाय transform: translateX(100px) को क्यों प्राथमिकता दें?
   • transform पुराने ब्राउज़रों द्वारा बेहतर समर्थित है
   • transform को कंपोज़िटर द्वारा संभाला जाता है, हर फ़्रेम पर लेआउट को फिर से गणना किए बिना
   • left केवल पूर्ण रूप से पोज़िशन किए गए तत्वों पर काम करता है, transform हर जगह काम करता है
   • transform नकारात्मक मान स्वीकार करता है, left के विपरीत
2. animation-fill-mode: both क्या करता है?
   • एनिमेशन आगे की ओर और फिर उल्टी दिशा में चलता है
   • एनिमेशन तत्व और उसके वंशजों पर लागू होता है
   • पहले कीफ़्रेम की स्टाइलें देरी के दौरान लागू होती हैं, और अंतिम कीफ़्रेम की स्टाइलें अंत के बाद बनी रहती हैं
3. will-change का सही उपयोग क्या है?
   • पूरे पेज को तेज़ करने के लिए इसे * पर विश्व स्तर पर लागू करें
   • एक महँगे एनिमेशन से ठीक पहले इसे जोड़ें और बाद में हटा दें
   • इसे हमेशा transform: translateZ(0) के साथ जोड़ें
   • माइक्रो-इंटरैक्शन के लिए transition के बजाय इसका उपयोग करें