अंतहीन सीएसएस रोटेशन एनीमेशन: एक आइकन को लगातार कैसे घुमाएं

सीएसएस का उपयोग करके एक आइकन के अंतहीन रोटेशन को प्राप्त करने के लिए, सीएसएस एनिमेशन का एक संयोजन और मुख्य-फ़्रेम आवश्यक है. निम्नलिखित चरण समाधान की रूपरेखा प्रस्तुत करते हैं:

1. कीफ़्रेम जोड़ें:

हम दो कीफ़्रेम परिभाषित करते हैं, एक रोटेशन की शुरुआत के लिए (0 डिग्री) और एक अंत के लिए (360 डिग्री)। यह एक सुचारु संक्रमण सुनिश्चित करता है।

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2. एनिमेशन लागू करें:

हम बनाए गए कीफ़्रेम एनीमेशन को उस तत्व पर लागू करते हैं जिसे हम CSS एनीमेशन प्रॉपर्टी का उपयोग करके घुमाना चाहते हैं। इस प्रॉपर्टी के लिए तीन पैरामीटर की आवश्यकता होती है: कीफ़्रेम नाम, अवधि, और लूप व्यवहार (अनंत)।

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3. सही ब्राउज़र संगतता समस्याएँ:

विभिन्न ब्राउज़रों में अनुकूलता सुनिश्चित करने के लिए, हम वेबकिट-आधारित ब्राउज़र (क्रोम, सफारी) के लिए विक्रेता उपसर्ग और अन्य ब्राउज़रों के लिए मानक गुण शामिल करते हैं।

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

इन चरणों का पालन करके, आप आसानी से सीएसएस का उपयोग करके आइकन और अन्य तत्वों के लिए अंतहीन रोटेशन एनिमेशन बना सकते हैं।