अच्छी परफ़ॉर्मेंस वाले सीएसएस ऐनिमेशन के उदाहरण

Rachel Andrew

इस पोस्ट में जानें कि CodePen पर मौजूद कुछ लोकप्रिय ऐनिमेशन कैसे बनाए गए हैं. इन सभी ऐनिमेशन में, इस सेक्शन के अन्य लेखों में बताई गई परफ़ॉर्मेंस को बेहतर बनाने वाली तकनीकों का इस्तेमाल किया गया है.

इन सुझावों के पीछे के सिद्धांत के बारे में जानने के लिए, कुछ ऐनिमेशन धीमे क्यों होते हैं? लेख पढ़ें. साथ ही, काम की सलाह पाने के लिए, ऐनिमेशन गाइड देखें.

विज़र्ड के लोड होने का ऐनिमेशन

CodePen पर Wizard के लोड होने का ऐनिमेशन देखें

इस लोडिंग ऐनिमेशन को पूरी तरह से सीएसएस की मदद से बनाया गया है. इमेज और पूरे ऐनिमेशन को सीएसएस और एचटीएमएल में बनाया गया है. इसमें किसी भी इमेज या JavaScript का इस्तेमाल नहीं किया गया है. इसे कैसे बनाया गया है और यह कैसा परफ़ॉर्म करता है, यह समझने के लिए Chrome DevTools का इस्तेमाल किया जा सकता है.

Chrome DevTools की मदद से ऐनिमेशन की जांच करना

ऐनिमेशन चालू होने पर, Chrome DevTools में परफ़ॉर्मेंस टैब खोलें और कुछ सेकंड के लिए ऐनिमेशन रिकॉर्ड करें. आपको खास जानकारी में दिखेगा कि इस ऐनिमेशन को चलाने के दौरान, ब्राउज़र कोई लेआउट या पेंट ऑपरेशन नहीं कर रहा है.

लेआउट और पेंट में बदलाव किए बिना, इस ऐनिमेशन को कैसे बनाया गया, यह जानने के लिए Chrome DevTools में जाकर, हिलने वाले किसी भी एलिमेंट की जांच करें. ऐनिमेशन पैनल का इस्तेमाल करके, अलग-अलग ऐनिमेटेड एलिमेंट ढूंढे जा सकते हैं. किसी भी एलिमेंट पर क्लिक करने से, वह डीओएम में हाइलाइट हो जाएगा.

उदाहरण के लिए, त्रिकोण चुनें. इसके बाद, देखें कि हवा में उड़ने के दौरान, घूमने के दौरान, और शुरुआती पोज़िशन में वापस आने के दौरान, एलिमेंट का बॉक्स कैसे बदलता है.

एलिमेंट को चुने हुए ही स्टाइल पैनल देखें. यहां आपको सीएसएस दिखेगी, जो त्रिकोण का आकार बनाती है. साथ ही, इस्तेमाल किया जा रहा ऐनिमेशन भी दिखेगा.

यह कैसे काम करता है

ट्रायंगल को ::after स्यूडो-एलिमेंट का इस्तेमाल करके बनाया गया है. इससे जनरेट किया गया कॉन्टेंट जोड़ा जाता है. साथ ही, बॉर्डर का इस्तेमाल करके शेप बनाया जाता है.

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

ऐनिमेशन को सीएसएस की इस लाइन के साथ जोड़ा जाता है,

animation: path_triangle 10s ease-in-out infinite;

Chrome DevTools में रहते हुए, स्टाइल पैनल को नीचे की ओर स्क्रोल करके कीफ़्रेम ढूंढे जा सकते हैं. यहां आपको पता चलेगा कि एलिमेंट की पोज़िशन बदलने और उसे घुमाने के लिए, transform का इस्तेमाल करके ऐनिमेशन बनाया गया है. transform प्रॉपर्टी, ऐनिमेशन गाइड में बताई गई प्रॉपर्टी में से एक है. इससे ब्राउज़र को लेआउट या पेंट ऑपरेशन नहीं करने पड़ते. ये ऑपरेशन, ऐनिमेशन के धीमे होने की मुख्य वजहें हैं.

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

इस ऐनिमेशन के हर मूविंग पार्ट में, मिलती-जुलती तकनीकों का इस्तेमाल किया गया है. इसका नतीजा एक जटिल ऐनिमेशन होता है, जो आसानी से चलता है.

पल्सटिंग सर्कल

CodePen पर पल्स करने वाला सर्कल देखें

इस तरह के ऐनिमेशन का इस्तेमाल कभी-कभी पेज पर किसी चीज़ पर ध्यान खींचने के लिए किया जाता है. ऐनिमेशन को समझने के लिए, Firefox DevTools का इस्तेमाल किया जा सकता है.

Firefox DevTools की मदद से ऐनिमेशन की जांच करना

ऐनिमेशन चालू होने पर, Firefox DevTools में परफ़ॉर्मेंस टैब खोलें और ऐनिमेशन को कुछ सेकंड के लिए रिकॉर्ड करें. रिकॉर्डिंग बंद करें. वॉटरफ़ॉल में आपको दिखेगा कि Recalculate Style के लिए कोई एंट्री नहीं है. अब आपको पता चल गया है कि इस ऐनिमेशन की वजह से स्टाइल की फिर से गणना नहीं होती. इसलिए, लेआउट और पेंट ऑपरेशन भी नहीं होते.

Firefox DevTools में ही रहकर, सर्कल की जांच करें और देखें कि यह ऐनिमेशन कैसे काम करता है. <div> में pulsating-circle क्लास का इस्तेमाल करके, सर्कल की पोज़िशन को मार्क किया जाता है. हालांकि, इससे सर्कल नहीं बनता.

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

दिखने वाले सर्कल और ऐनिमेशन को ::before और ::after छद्म-एलिमेंट का इस्तेमाल करके बनाया गया है.

::before एलिमेंट, अपारदर्शी रिंग बनाता है. यह रिंग, सफ़ेद सर्कल के बाहर तक फैली होती है. यह pulse-ring नाम के ऐनिमेशन का इस्तेमाल करके बनाई जाती है. यह ऐनिमेशन, transform: scale और opacity को ऐनिमेट करता है.

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

यह देखने का दूसरा तरीका कि किन प्रॉपर्टी में ऐनिमेशन हो रहा है, Firefox DevTools में ऐनिमेशन पैनल को चुनना है. इसके बाद, आपको इस्तेमाल किए जा रहे ऐनिमेशन और ऐनिमेट की जा रही प्रॉपर्टी का विज़ुअलाइज़ेशन दिखेगा.

सफ़ेद गोले को ::after सूडो-एलिमेंट का इस्तेमाल करके बनाया और ऐनिमेट किया गया है. ऐनिमेशन pulse-dot, ऐनिमेशन के दौरान बिंदु को बड़ा और छोटा करने के लिए transform: scale का इस्तेमाल करता है.

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

इस तरह के ऐनिमेशन का इस्तेमाल आपके ऐप्लिकेशन में कई जगहों पर किया जा सकता है. यह ज़रूरी है कि इन छोटे-छोटे बदलावों से, आपके ऐप्लिकेशन की परफ़ॉर्मेंस पर कोई असर न पड़े.

प्योर सीएसएस 3D स्फ़ियर

CodePen पर प्योर सीएसएस 3D स्फ़ियर देखें

यह ऐनिमेशन काफ़ी मुश्किल लगता है. हालांकि, इसमें उन तकनीकों का इस्तेमाल किया गया है जिन्हें हम पिछले उदाहरणों में देख चुके हैं. ज़्यादातर एलिमेंट में ऐनिमेशन जोड़ने से, परफ़ॉर्मेंस पर असर पड़ता है.

Chrome DevTools खोलें और plane क्लास वाला कोई एलिमेंट चुनें. यह स्फ़ियर, घूमने वाले प्लेन और स्पोक के सेट से बना है.

ये प्लेन और स्पोक, रैपर <div> के अंदर हैं. साथ ही, transform: rotate3d का इस्तेमाल करके रोटेट किया जा रहा है.

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

डॉट, plane और spoke एलिमेंट में नेस्ट किए गए हैं. ये ऐनिमेशन का इस्तेमाल करते हैं. ऐनिमेशन, ट्रांसफ़ॉर्म का इस्तेमाल करके इन्हें स्केल और ट्रांसलेट करता है. इससे पल्सिंग इफ़ेक्ट बनता है.

.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

इस ऐनिमेशन को बनाने में, टाइमिंग को सही करने और घूमने और पल्सिंग का इफ़ेक्ट बनाने का काम किया गया है. ऐनिमेशन काफ़ी आसान हैं और इनमें ऐसे तरीकों का इस्तेमाल किया गया है जो बहुत अच्छा परफ़ॉर्म करते हैं.

Chrome DevTools खोलकर और परफ़ॉर्मेंस रिकॉर्ड करके, यह देखा जा सकता है कि यह ऐनिमेशन कैसा काम करता है. शुरुआती लोड के बाद, ऐनिमेशन से लेआउट या पेंट ट्रिगर नहीं हो रहा है. साथ ही, यह आसानी से चल रहा है.

नतीजा

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