सीएसएस अंतहीन रोटेशन एनीमेशन

Question

मैं सीएसएस द्वारा अपने लोडिंग आइकन का रोटेशन करना चाहता हूं।

मेरे पास एक आइकन और निम्नलिखित कोड है:

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

लेकिन यह काम नहीं करता है। CSS का उपयोग करके आइकन को कैसे घुमाया जा सकता है?

Comments

स्थापित समाधान - jsfiddle.net/LwwfG प्रश्न को बंद करने के लिए, कृपया जवाब दें।

— अलेक्जेंडर रूलियोव

आप अपना खुद का जवाब जोड़ सकते हैं। इसमें, अपने jsFiddle डेमो के कोड को शामिल करें।

— १२:३० पर ३०

Answer 1

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

Comments

एक सवाल है, -moz-और -ms-उपसर्ग आवश्यक हैं -webkit-keyframes? जैसा कि केवल वेबकिट पढ़ेगा -webkit-keyframesमुझे लगता है कि उन्हें निकालना सुरक्षित है।

— बोर

क्या मैं यह समझने में सही हूं कि यह सैद्धांतिक रूप से सही नहीं है क्योंकि गैर-विक्रेता-उपसर्ग वाले गुणों को हमेशा अंतिम होना चाहिए ताकि मानकों-अनुरूप व्यवहार को ओवरराइड नहीं किया जा सके? देखें: css-tricks.com/ordering-css3-properties

ठंडा। संपादन से पहले जाँच कर रहा था। 100% निश्चित नहीं था।

@ रेकी - टिप: जब आप पहले ही लेखक के साथ एक संपादन पर चर्चा कर चुके हैं (जैसा कि ऊपर) यह "टिप्पणी संपादित करें" में उल्लेख करना बुरा नहीं है। इसलिए संपादन "कट्टरपंथी परिवर्तन" के रूप में खारिज नहीं किया जाता; ;-)

— लेह

यदि आप PostCSS का उपयोग कर रहे हैं, तो उपयोग करते समय सभी क्रॉस ब्राउज़र समस्याओं को संभालने के लिए ऑटोप्रिफ़र का उपयोग करने पर विचार करें transform।

— मीकाल पिएत्र्ज़्स्को

Answer 2

अच्छा काम:

#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

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

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

<div id='test' class='rotating'></div>

Comments

क्या कोई क्रॉसब्रोसर सीएसएस समाधान उपलब्ध है?

— andrej

Answer 3

सीएसएस में अनंत रोटेशन एनीमेशन

/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}

<span class="spinner rotate"></span>

एमडीएन - वेब सीएसएस एनिमेशन

Answer 4

बिना किसी उपसर्ग के, जैसे कि यह सबसे सरल है:

.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

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

Answer 5

सभी आधुनिक ब्राउज़रों में काम करता है

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

Answer 6

<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

Answer 7

जोड़ने पर कक्षा सक्रिय है

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



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

Answer 8

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}

Comments

नमस्ते, ढेर अतिप्रवाह में आपका स्वागत है! जब आप किसी प्रश्न का उत्तर देते हैं तो आपको किसी प्रकार का स्पष्टीकरण शामिल करना चाहिए, जैसे कि लेखक ने क्या गलत किया और आपने उसे ठीक करने के लिए क्या किया। मैं आपको यह बता रहा हूं क्योंकि आपके उत्तर को निम्न-गुणवत्ता के रूप में चिह्नित किया गया है और वर्तमान में इसकी समीक्षा की जा रही है। आप "संपादित करें" बटन पर क्लिक करके अपना उत्तर संपादित कर सकते हैं ।

— फेडेरिको ग्रैंडि