फ़िज़िक्स पर आधारित ईज़िंग

ease-in या cubic-bezier() जैसे पारंपरिक सीएसएस ईज़िंग फ़ंक्शन, सिर्फ़ आसान कर्व तक सीमित होते हैं. इस वजह से, बाउंस या स्प्रिंग जैसे फ़िज़िक्स पर आधारित मुश्किल इफ़ेक्ट नहीं बनाए जा सकते. linear() टाइमिंग फ़ंक्शन, इस समस्या को हल करता है. इसकी मदद से, स्टॉप की एक सीरीज़ दी जा सकती है. इससे जटिल कर्व का अनुमान लगाया जा सकता है. ट्रांज़िशन और ऐनिमेशन, स्टॉप के बीच की सीधी लाइनों के आधार पर इंटरपोलेट किए जाते हैं. हालांकि, ज़रूरत के मुताबिक स्टॉप होने पर, यह स्मूद दिख सकता है.

लागू करने के चरण

1. कर्व स्टॉप जनरेट करना: स्प्रिंग या बाउंस के लिए, मैन्युअल तरीके से दर्जनों पॉइंट प्लॉट करना मुश्किल होता है. किसी बाहरी लाइब्रेरी के टाइमिंग फ़ंक्शन का इस्तेमाल करें या किसी टूल का इस्तेमाल करके, मौजूदा JavaScript ईज़िंग फ़ंक्शन या SVG पाथ को linear() सिंटैक्स में बदलें. ज़रूरी नहीं: इन टाइमिंग फ़ंक्शन को सीएसएस कस्टम प्रॉपर्टी के तौर पर सेव करें, ताकि इन्हें पूरी साइट पर फिर से इस्तेमाल किया जा सके.
2. टाइमिंग फ़ंक्शन तय करना: जनरेट किए गए स्टॉप को transition-timing-function या animation-timing-function प्रॉपर्टी पर लागू करें. इसके अलावा, transition या animation शॉर्टहैंड का इस्तेमाल करके भी ऐसा किया जा सकता है.
3. अवधि में बदलाव करना: JavaScript फ़िज़िक्स इंजन में, अवधि को फ़िज़िकल प्रॉपर्टी (मास, स्टिफ़नेस) से तय किया जाता है. हालांकि, सीएसएस में अब भी एक तय duration की ज़रूरत होती है. मनचाहा असर पाने के लिए, आपको अवधि में बदलाव करना पड़ सकता है.

उदाहरण: Spring Easing

इस उदाहरण में, कस्टम linear() फ़ंक्शन का इस्तेमाल करके, स्प्रिंग इफ़ेक्ट बनाने का तरीका बताया गया है. यह इफ़ेक्ट, टारगेट वैल्यू पर सेट होने से पहले, उससे ज़्यादा वैल्यू दिखाता है.

.spring {
  /* Define the physics-based easing as a reusable variable */
  --spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);


  /* Apply the easing with a duration that fits the spring's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.8s var(--spring-easing);
}

.spring:hover {
  scale: 1.2;
}

उदाहरण: बाउंस ईज़िंग

इस उदाहरण में, बाउंस इफ़ेक्ट बनाने के लिए कस्टम linear() फ़ंक्शन का इस्तेमाल करने का तरीका बताया गया है.

.bounce {
  /* Define the physics-based easing as a reusable variable */
  --bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);


  /* Apply the easing with a duration that fits the bounce's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.4s var(--bounce-easing);
}

.bounce:hover {
  scale: 1.2;
}

ध्यान रखने वाली मुख्य बातें

• परफ़ॉर्मेंस: फ़िज़िक्स पर आधारित ऐनिमेशन को बेहतर तरीके से चलाने के लिए, linear() को उन प्रॉपर्टी पर लागू करें जो अलग थ्रेड पर चलती हैं. जैसे, transform और opacity.
• सटीक ग्रेडिएंट बनाम पेलोड: ज़्यादा स्टॉप जोड़ने से ग्रेडिएंट ज़्यादा स्मूद बनता है, लेकिन इससे सीएसएस का साइज़ भी बढ़ जाता है. ज़्यादातर जनरेटर, कर्व को "आसान" बनाने की सुविधा देते हैं. इससे स्मूदनेस और कोड के साइज़ के बीच सही संतुलन बनाया जा सकता है.
• बाउंस के लिए ओपैसिटी का इस्तेमाल न करें: opacity पर बाउंस ईज़िंग लागू करने से, विज़ुअल में झटकेदार फ़्लिकरिंग हो सकती है. ऐसा तब होता है, जब वैल्यू 0 से कम या 1 से ज़्यादा हो जाती है.
• सुलभता: फ़िज़िक्स पर आधारित जटिल ऐनिमेशन, कुछ उपयोगकर्ताओं का ध्यान भटका सकते हैं या उन्हें मोशन सेंसिटिविटी की समस्या हो सकती है. इन ऐनिमेशन को कम करके या बंद करके, हमेशा उपयोगकर्ता की प्राथमिकताओं का सम्मान करें.

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

फ़ॉलबैक रणनीतियां

सीएसएस फ़ॉलबैक

linear() के साथ काम न करने वाले ब्राउज़र के लिए, फ़ॉलबैक के तौर पर स्टैंडर्ड ईज़िंग फ़ंक्शन उपलब्ध कराएं. अगर ब्राउज़र को linear() वैल्यू की पहचान नहीं होती है, तो वह उसे अनदेखा कर देगा. साथ ही, वह पिछली मान्य वैल्यू पर वापस चला जाएगा.

.element {
  /* Fallback for older browsers (standard smooth exit) */
  transition: transform 0.8s ease-out;
  
  /* Modern browsers will override with the physics-based easing */
  transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}

JavaScript लाइब्रेरी फ़ॉलबैक (Motion/GSAP)

ज़रूरी नहीं: अगर पुराने ब्राउज़र में भी हाई-फ़िडेलिटी फ़िज़िक्स ऐनिमेशन ज़रूरी है, तो linear() के काम न करने पर ऐनिमेशन को मैनेज करने के लिए, Motion (motion.dev) या GSAP (greensock.com) जैसी JavaScript लाइब्रेरी का इस्तेमाल करें.

1. यह पता लगाना कि ब्राउज़र पर यह सुविधा काम करती है या नहीं: CSS.supports() का इस्तेमाल करके देखें कि ब्राउज़र पर linear() फ़ंक्शन काम करता है या नहीं.
2. शर्त के हिसाब से लोड/लागू करें: अगर यह सुविधा काम नहीं करती है, तो लाइब्रेरी के स्प्रिंग या बाउंस लागू करने की सुविधा का इस्तेमाल करें.

/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');

if (!supportsLinearEasing) {
  /* 
     Example using Motion (motion.dev) for a spring fallback.
     This should only be initialized if native CSS support is missing.
  */
  import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
    animate(".element", { transform: "scale(1.2)" }, {
      easing: spring({ stiffness: 100, damping: 10 })
    });
  });
}

सुविधा का ज़्यादा सटीक तरीके से पता लगाने के लिए, सीएसएस में @supports का भी इस्तेमाल किया जा सकता है:

@supports not (animation-timing-function: linear(0, 1)) {
  .element {
    /* Alternative experience for unsupported browsers */
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}