CSS3 स्पिन एनीमेशन

आपने एनीमेशन शैलियों को सही ढंग से लागू किया है, लेकिन आपका एनीमेशन काम नहीं कर रहा है क्योंकि आपने इसके लिए कीफ़्रेम परिभाषित नहीं किए हैं एनीमेशन।

CSS3 एनिमेशन को एनीमेशन की शुरुआत और अंत स्थिति को परिभाषित करने के लिए कीफ़्रेम की आवश्यकता होती है।

समस्या को ठीक करने के लिए, अपने सीएसएस कोड में कीफ़्रेम जोड़ें। यह परिभाषित करेगा कि एनीमेशन के दौरान आपका तत्व कैसे रूपांतरित होगा। इसे कैसे करें इसका एक उदाहरण यहां दिया गया है:

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

यह एक कीफ़्रेम को परिभाषित करता है जो एनीमेशन को 0 डिग्री पर शुरू करता है और इसे 360 डिग्री पर समाप्त करता है। वांछित एनीमेशन प्रभाव बनाने के लिए आप इन मानों को अनुकूलित कर सकते हैं।

समाधान को चित्रित करने के लिए यहां एक डेमो है:

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

इन परिवर्तनों के साथ, आपका तत्व अब लगातार घूमना चाहिए। याद रखें, CSS3 एनिमेशन के काम करने के लिए, आपको एनीमेशन शैलियों और एनीमेशन कीफ़्रेम दोनों को परिभाषित करने की आवश्यकता है।