146

Yükleme simgemi CSS ile döndürmek istiyorum.

Bir simge ve aşağıdaki kod var:

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

Ama işe yaramıyor. Simge CSS kullanılarak nasıl döndürülebilir?

css animation webkit

— Alexander Ruliov
kaynak

3

kurulan çözüm - jsfiddle.net/LwwfG cevap lütfen, soruyu kapatmak için.

— Alexander Ruliov

3

Kendi cevabınızı ekleyebilirsiniz. İçinde, jsFiddle demo içindeki kodu ekleyin.

— thirtydot

263

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

Snippet'i genişlet

— Kirk Strobeck
kaynak

12

bir soru, altında -moz-ve -ms-ön ekleri gerekli -webkit-keyframesmidir? sadece webkit okuyacağım gibi -webkit-keyframesonları kaldırmak güvenli olduğuna inanıyorum.

— Bor691

2

Standartlara uygun davranışı geçersiz kılmamak için her zaman satıcı öneksiz özellikler olması gerektiği için teorik olarak mükemmel olmadığını anlamak doğru muyum? Bakınız: css-tricks.com/ordering-css3-properties

Güzel. Düzenlemeden önce kontrol ediyordum. % 100 emin değildim.

@Ricky - İpucu: Yazarla bir düzenlemeyi daha önce tartıştığınız zaman (yukarıdaki gibi) "yorumları düzenle" de bahsetmek kötü bir fikir değildir. Yani düzenleme bir "radikal değişim" olarak reddedilmedi ;-)

— Leigh

1

PostCSS kullanıyorsanız, sadece kullanırken tarayıcılar arası tüm sorunları çözmek için otomatik düzeltici kullanmayı düşünün transform.

— Michał Pietraszko

88

Güzel çalışıyor:

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

Snippet'i genişlet

— Alexander Ruliov
kaynak

herhangi bir crossbrowser css çözümü var mı?

— andrej

13

CSS'de sonsuz döndürme animasyonu

/* 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>

Snippet'i genişlet

MDN - Web CSS Animasyonu

— Roko C. Buljan
kaynak

6

Herhangi bir önek olmadan, örneğin en basitinde:

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

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

— Dorian
kaynak

5

Tüm modern tarayıcılarda çalışır

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

— Kareem
kaynak

1

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

— pradip kor
kaynak

1

Sınıf ekleme etkin .aktif

  .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);
       }
     }

— DINESH Adhikari
kaynak

1

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

div{
   animation: rotate 4s linear infinite;
}

— vinkal
kaynak

3

Merhaba, Stack Overflow'a hoş geldiniz! Bir soruyu cevapladığınızda, yazarın neyi yanlış yaptığı ve düzeltmek için ne yaptığınız gibi bir tür açıklama eklemelisiniz. Size söylüyorum çünkü cevabınız düşük kaliteli olarak işaretlenmiş ve şu anda inceleniyor. Sen olabilir düzenleme "Düzenle" düğmesini tıklayarak cevabınızı.

— Federico Grandi

CSS sonsuz döndürme animasyonu

CSS'de sonsuz döndürme animasyonu