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

Question

मैंने कुछ डेमो की समीक्षा की है और मुझे पता नहीं है कि मुझे फ़ंक्शन करने के लिए CSS3 स्पिन क्यों नहीं मिल सकता है। मैं Chrome की नवीनतम स्थिर रिलीज़ का उपयोग कर रहा हूं।

द फिडेल: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

<div></div>

Answer 1

CSS3 एनीमेशन का उपयोग करने के लिए आपको वास्तविक एनीमेशन कीफ्रेम ( जिसे आपने नाम दिया हैspin ) को परिभाषित करना होगा

अधिक जानकारी के लिए https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations पढ़ें

एक बार जब आप एनीमेशन के समय को कॉन्फ़िगर कर लेते हैं, तो आपको एनीमेशन की उपस्थिति को परिभाषित करने की आवश्यकता होती है। यह @keyframesएट-रूल का उपयोग करके दो या अधिक कीफ्रेम स्थापित करके किया जाता है । प्रत्येक keyframe का वर्णन है कि एनिमेटेड तत्व को एनीमेशन अनुक्रम के दौरान किसी निश्चित समय पर कैसे प्रस्तुत करना चाहिए।

---

पर डेमो http://jsfiddle.net/gaby/9Ryvs/7/

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

Comments

आपको the मिलता है क्योंकि आपने इसे सबसे अच्छा समझाया और आप एकमात्र उत्तर हैं जिसमें सभी उपसर्ग संस्करण शामिल हैं।

— १:07

यह सुपर नाइट्पी है, लेकिन आपको वास्तव में इसे 359 डिग्री तक घटाना चाहिए। 360 और 0 डिग्री एक ही रेडियल होते हैं, इसलिए एनीमेशन कभी भी पूर्ण मोड़ पर कभी भी रुक जाएगा।

— एडम ग्रांट

@ अदमग्रंथ धन्यवाद, इसने मुझे लगभग आज सिरदर्द बना दिया है

— mattslone

आप 359.9999999999 डिग्री पर चेतन करना चाहते हैं, न कि 359। रोटेशन की डिग्री [0, 360) की एक सतत श्रेणी है और यदि आप 359.0 की ओर घूमते हैं तो आपके पास 359 से 0 तक युद्ध होने पर हर घुमाव की शुरुआत में 1 डिग्री टिक होगा। ।

— mdonoughe

इन सभी टिप्पणियों को स्पष्ट करने के लिए, जो गलत जानकारी दे रहे हैं ... चयनित उत्तर संशोधनों के बिना सही है। 0 और 360 डिग्री वास्तव में एक ही बिंदु होते हुए भी ब्राउज़र की नज़र में अलग हैं। उदाहरण के लिए यदि आप इसे 0deg से 0deg (या 360deg से 360deg) तक घुमाने का प्रयास करते हैं, तो यह बिल्कुल भी नहीं घूमेगा। इसे 0deg से 360deg तक घुमाते हुए, ब्राउज़र को एनीमेशन पूरा करने से पहले ऑब्जेक्ट को पूर्ण 360 डिग्री चालू करने के लिए कहता है। सेट करें animation-iteration-count: infinite;और आपके पास एनीमेशन में अनंत फ़्रेम होंगे। यहां तक ​​कि 20 मिनट का रोटेशन निर्दोष और चिकना लगेगा।

— जैकुर्टिस

Answer 2

आपने कोई कीफ़्रेम निर्दिष्ट नहीं किया है। मैंने यहां काम किया ।

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

आप वास्तव में इस के साथ वास्तव में बहुत अच्छा सामान कर सकते हैं। यहाँ एक है जिसे मैंने पहले बनाया था ।

:)

एनबी आप सभी उपसर्गों को लिखने के लिए छोड़ सकते हैं यदि आप -प्रोफिक्स-फ्री का उपयोग करते हैं ।

Answer 3

नवीनतम क्रोम / एफएफ और IE11 पर -ms / -moz / -webkit उपसर्ग की कोई आवश्यकता नहीं है। यहाँ एक छोटा कोड है (पिछले उत्तरों के आधार पर):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

लाइव डेमो: http://jsfiddle.net/9Ryvs/3057/

Comments

शॉर्टहैंड के साथ एनीमेशन नियम मिलाएं animation: spin 4s linear infinite।

— जोश हब्दास

Answer 4

HTML फ़ॉन्ट-विस्मयकारी ग्लिफ़िकॉन के साथ।

<span class="fa fa-spinner spin"></span>

सीएसएस

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}

Comments

तुम भी .spin के लिए परिभाषा जोड़ने के लिए मेरे upvote प्राप्त करें

— ब्लेयर कोनोली

Answer 5

एकमात्र उत्तर जो सही 359deg देता है:

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

&.active {
  animation: spin 1s linear infinite;
}

यहां एक उपयोगी ढाल है ताकि आप यह साबित कर सकें कि यह कताई है (यदि इसका एक चक्र है):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

Answer 6

घुमाने के लिए, आप मुख्य फ्रेम और एक ट्रांसफॉर्मेशन का उपयोग कर सकते हैं।

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

उदाहरण

Answer 7

पूरा होने के लिए, यहां एक सास / कम्पास उदाहरण है जो वास्तव में कोड को छोटा करता है, संकलित सीएसएस में आवश्यक उपसर्ग आदि शामिल होंगे।

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

Answer 8

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

यह आपको प्रश्न का उत्तर देने में मदद करेगा

Comments

यह इस मौजूदा जवाब का सिर्फ एक दोहराव प्रतीत होता है ।

— पैंग