Animasi rotasi tanpa akhir CSS

146

Saya ingin membuat rotasi ikon pemuatan saya dengan CSS.

Saya memiliki ikon dan kode berikut:

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

Tapi itu tidak berhasil. Bagaimana ikon diputar menggunakan CSS?

css animation webkit Alexander Ruliov
sumber
3
solusi yang ditemukan - jsfiddle.net/LwwfG jawab tolong, untuk menutup pertanyaan.
Alexander Ruliov
3
Anda dapat menambahkan jawaban Anda sendiri. Di dalamnya, masukkan kode dari dalam demo jsFiddle Anda.
tigapuluh tanggal

Jawaban:

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

Kirk Strobeck
sumber
12
satu pertanyaan, apakah -moz-dan -ms-awalan diperlukan di bawah -webkit-keyframes? karena hanya webkit yang akan membaca, -webkit-keyframessaya yakin aman untuk menghapusnya.
Bor691
2
Apakah saya benar dalam memahami ini secara teoritis tidak sempurna karena sifat non-vendor-awalan harus selalu menjadi yang terakhir agar tidak mengesampingkan perilaku yang sesuai standar? Lihat: css-tricks.com/ordering-css3-properties
Keren. Sedang memeriksa sebelum mengedit. Tidak 100% yakin.
@ Ricky - Kiat: Ketika Anda telah membahas hasil edit dengan penulis (seperti di atas), bukan ide yang buruk untuk menyebutkan hal itu di "edit komentar". Jadi hasil edit tidak ditolak sebagai "perubahan radikal" ;-)
Leigh
1
Jika Anda menggunakan PostCSS, pertimbangkan untuk menggunakan autoprefixer untuk menangani semua masalah lintas browser saat hanya menggunakan transform.
Michał Pietraszko
88

Bekerja dengan baik:

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

Alexander Ruliov
sumber
apakah ada solusi css crossbrowser yang tersedia?
andrej
13

Animasi rotasi tak terbatas dalam CSS

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

MDN - Animasi CSS Web

Roko C. Buljan
sumber
6

Tanpa awalan, mis. Paling sederhana:

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

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

Bekerja di semua browser modern

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}
Kareem
sumber
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
sumber
1

Rotasi pada add class .active

  .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
sumber
1 
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}
Vinkal
sumber
3
Hai, selamat datang di Stack Overflow! Ketika Anda menjawab pertanyaan, Anda harus memasukkan beberapa jenis penjelasan, seperti apa yang salah penulis dan apa yang Anda lakukan untuk memperbaikinya. Saya memberi tahu Anda ini karena jawaban Anda telah ditandai sebagai berkualitas rendah dan saat ini sedang ditinjau. Anda dapat mengedit jawaban Anda dengan mengeklik tombol "Edit".
Federico Grandi