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

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 खोलकर और परफ़ॉर्मेंस रिकॉर्ड करके, यह देखा जा सकता है कि यह ऐनिमेशन कैसा काम कर रहा है. शुरुआती लोड के बाद, ऐनिमेशन से लेआउट या पेंट ट्रिगर नहीं हो रहा है और यह आसानी से चल रहा है.

नतीजा

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