সিএসএস অন্তহীন ঘূর্ণন অ্যানিমেশন

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>

কিন্তু এটি কাজ করে না। সিএসএস ব্যবহার করে আইকনটি কীভাবে আবর্তিত হতে পারে?

Comments

ভিত্তিযুক্ত সমাধান - jsfiddle.net/LwwfG উত্তর দয়া করে, বন্ধ প্রশ্ন।

— আলেকজান্ডার রুলিভ

আপনি নিজের উত্তর যুক্ত করতে পারেন। এটিতে, আপনার জেএসফিডাল ডেমোটির ভিতরে থেকে কোডটি অন্তর্ভুক্ত করুন।

— ত্রিশডট

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আমি বিশ্বাস করি এগুলি সরিয়ে ফেলা নিরাপদ।

— Bor691

আমি কী বুঝতে পারছি যে এটি তাত্ত্বিকভাবে নিখুঁত নয় কারণ নন-বিক্রেতা-উপসর্গযুক্ত বৈশিষ্ট্য সর্বদা শেষ হওয়া উচিত যাতে মান-অনুবর্তী আচরণকে ওভাররাইড না করা যায়? দেখুন: css-tricks.com/ordering-css3-properties

কুল। সম্পাদনার আগে পরীক্ষা করা হয়েছিল। 100% নিশ্চিত ছিল না।

@ রিকি - টিপ: আপনি ইতিমধ্যে লেখকের সাথে সম্পাদনার বিষয়ে আলোচনা করেছেন (উপরে হিসাবে) "মন্তব্যগুলি সম্পাদনা করুন" এ তা উল্লেখ করা খারাপ ধারণা নয়। সুতরাং সম্পাদনাটিকে "আমূল পরিবর্তন" হিসাবে প্রত্যাখ্যান করা হয় না ;-)

— লেই

আপনি যদি পোস্টসিএসএস ব্যবহার করে থাকেন তবে সবেমাত্র ব্যবহার করার সময় সমস্ত ক্রস ব্রাউজার সমস্যাগুলি হ্যান্ডেল করতে অটোপ্রেফিক্সার ব্যবহার বিবেচনা করুন 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>

MDN - ওয়েব সিএসএস অ্যানিমেশন

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

অ্যাড ক্লাসে রোটেশন .একটিভ

  .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 7

<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 8

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

div{
   animation: rotate 4s linear infinite;
}

Comments

হাই, স্ট্যাক ওভারফ্লোতে আপনাকে স্বাগতম! আপনি যখন কোনও প্রশ্নের উত্তর দেন তখন আপনার কোনও ধরণের ব্যাখ্যা অন্তর্ভুক্ত করা উচিত, যেমন লেখক কী ভুল করেছেন এবং এটি সমাধান করার জন্য আপনি কী করেছিলেন। আমি এটি আপনাকে বলছি কারণ আপনার উত্তরটি নিম্নমানের হিসাবে চিহ্নিত হয়েছে এবং বর্তমানে এটি পর্যালোচনা করা হচ্ছে। আপনি "সম্পাদনা" বোতামটি ক্লিক করে আপনার উত্তর সম্পাদনা করতে পারেন।

— ফেডেরিকো গ্র্যান্ডি