छवियों को लगातार घुमाने के लिए CSS एनिमेशन का उपयोग कैसे करें

इस त्वरित ट्यूटोरियल में, आप सीखेंगे कि CSS एनिमेशन प्रॉपर्टी का उपयोग करके छवियों को लगातार कैसे घुमाना है।

सबसे पहले, हमें एक छवि और कुछ विशेषताओं के साथ कुछ HTML मार्कअप चाहिए:

<img
  src="/article/uploadfiles/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

आपकी छवि इस तरह दिखाई देनी चाहिए:

जैसा कि आप देख सकते हैं कि हमारे इमेज एलिमेंट के तीन वर्ग हैं, rotate , linear और infinite . हमारे सीएसएस स्टाइलशीट में हमें प्रत्येक वर्ग के लिए एक घोषणा ब्लॉक बनाने की जरूरत है। इस प्रकार की कक्षाओं को कभी-कभी उपयोगिता . कहा जाता है या सहायक कक्षाएं, लेकिन मुझे एकल-उद्देश्य . शब्द पसंद है क्योंकि यह अधिक वर्णनात्मक है।

सबसे पहले .rotate . घोषित करते हैं कोड ब्लॉक:

.rotate {
  animation: rotation 2s;
}

अभी कुछ नहीं होगा, क्योंकि हमें एनीमेशन प्रॉपर्टी के रोटेशन फ़ंक्शन को परिभाषित करने की आवश्यकता है। इस सीएसएस कीफ़्रेम नियम को अपनी स्टाइलशीट में जोड़ें:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

अब यदि आप अपने ब्राउज़र टैब को पुनः लोड करते हैं, तो आपको अपनी छवि को 2 सेकंड में एक बार घुमाते हुए देखना चाहिए (2s ) लेकिन हमें दो और काम करने की जरूरत है। हम चाहते हैं कि छवि लगातार घूमती रहे, और हम एनीमेशन संक्रमण समय को डिफ़ॉल्ट ease . से बदलना चाहते हैं एक सुसंगत गति वक्र के लिए, जिसे linear . कहा जाता है ।

इसे जोड़ें .linear आपके CSS स्टाइलशीट में डिक्लेरेशन ब्लॉक:

.linear {
  animation-timing-function: linear;
}

अपने ब्राउज़र टैब को पुनः लोड करें और आप देखेंगे कि आपकी छवि अब शुरू से अंत तक लगातार गति दर से घूम रही है।

अंत में, आइए हमारे .infinite . की घोषणा करके अपनी छवि को असीमित रूप से घुमाते हैं कक्षा का कोड ब्लॉक:

.infinite {
  animation-iteration-count: infinite;
}

और वोइला, अब आपके पास एक रेखीय एनिमेशन गति वक्र के साथ एक अनंत/लगातार घूमती हुई छवि है।

कोडपेन पर पूरा कोड देखें

नोट:हम अपने सभी एनिमेशन गुणों को एक पंक्ति और एक वर्ग में घोषित कर सकते थे, जैसे:

.rotate-image {
  animation: rotation 2s linear infinite;
}

उपरोक्त बहुत सारे कोड बचाता है, लेकिन सीखने/सिखाने के लिए, मैं चीजों को छोटे टुकड़ों में तोड़ना पसंद करता हूं, क्योंकि इससे यह समझना आसान हो जाता है कि अलग-अलग घटक एक साथ कैसे काम करते हैं।

डिफ़ॉल्ट ease . के बगल में कई एनिमेशन वक्र हैं और linear जिसका हम यहां उपयोग करते हैं। आप cubic-bezier . का उपयोग करके वास्तव में फैंसी प्राप्त कर सकते हैं एनिमेशन कर्व, लेकिन मैं इसे एक अलग ट्यूटोरियल के लिए सहेजूंगा।