Putar Animasi CSS3

245
<img class="image" src="" alt="" width="120" height="120">

Tidak dapat membuat gambar animasi ini bekerja, seharusnya melakukan rotasi 360 derajat.

Saya kira ada yang salah dengan CSS di bawah ini, karena hanya diam saja.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-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); 
        }
    }
}
Borsn
sumber

Jawaban:

521

Ini demo . CSS animasi yang benar:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


Beberapa catatan pada kode Anda:

  1. Anda telah membuat kerangka kunci di dalam .imageaturan, dan itu tidak benar
  2. float:left tidak akan bekerja pada elemen yang benar-benar diposisikan
  3. Lihatlah caniuse : IE10 tidak membutuhkan -ms-awalan
Giona
sumber
13
Jika ada yang mencoba ini dengan kode mereka sendiri: DONT FORGET THE @ section at the bottom
Jack M.
Halo, bisakah saya menghentikan animasi Infinity rotasi setelah 5s?
MD Ashik
16
Saya hampir meludahkan air saya ketika saya menjalankan animasi.
Razgriz
" float:left won't work on absolutely positioned elements", itu akan mengecilkan mereka ke ukuran minimum, mirip dengan apa yang ditampilkan: inline-block tidak
gregn3
32

Saya memiliki gambar yang diputar menggunakan hal yang sama seperti Anda:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
Ryan de Vries
sumber
1
tambahkan: transform:rotate(360deg);untuk IE
Dusty
3
Harap pilih contoh lokal dari tautan situs web yang rusak.
evolutionxbox
Tautan rusak sekarang.
Markus Bucher
30

Untuk mencapai rotasi 360 derajat, di sini adalah Solusi Bekerja .

HTML:

<img class="image" src="your-image.png">

CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Anda harus mengarahkan kursor pada gambar dan Anda akan mendapatkan efek rotasi 360 derajat.

PS: Tambahkan -webkit-ekstensi agar bisa berfungsi di chrome dan browser webkit lainnya. Anda dapat memeriksa biola yang diperbarui untuk webkit DI SINI

Nitesh
sumber
Fiddle tidak berfungsi. Inspektur Chrome tidak menyukai CSS Anda, khususnya "transform" dan "property-transisi". Oh sayang.
Just Plain High
1
Untuk itu Anda perlu menambahkan -webkit-tranformagar bisa berfungsi. Ini biola yang diperbarui. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: Ini sekarang didukung dengan sangat baik dan cara yang disukai untuk melakukan rotasi tanpa batas. -webkit-awalan tidak lagi diperlukan dan dapat dihapus dengan aman. Browser dukungan: caniuse.com/#search=transforms
Alph.Dev
2

jika Anda ingin membalik gambar, Anda dapat menggunakannya.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
Heo Ht Hades
sumber
0

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Charles Mbogo
sumber
0

coba ini dengan mudah

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-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); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Omar bakhsh
sumber
-6

Di sini ini akan membantu Anda

Tautan jsfiddle di bawah ini akan membantu Anda memahami cara memutar gambar. Saya menggunakan yang sama untuk memutar tombol jam.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Di mana: • t: waktu saat ini,

• b: mohon nilai,

• c: ubah nilainya,

• d: durasi,

• x: tidak digunakan

Tanpa pelonggaran (pelonggaran linier): fungsi (x, t, b, c, d) {return b + (t / d) * c; }

Abhi
sumber
2
Saya akan mengangkat jawaban ini jika Anda memberikan informasi lebih banyak (seperti yang Anda lakukan di biola). Saya juga merasa Anda harus menyebutkan ini adalah plugin jQuery karena saya semua suka, "Saya tidak tahu jQuery bisa melakukan itu !!! ^ _ ^ melihat biola Oh, tunggu ... U_U"
Just Plain High
2
penjelasan tentang variabel x, t, b, c, d (seperti yang Anda lakukan di biola) dan dengan jelas menyatakan bahwa meskipun itu bukan solusi CSS seperti yang diminta oleh OP, itu adalah solusi plugin jQuery yang cukup sederhana dan efektif: )
Just Plain High
3
Diturunkan. OP tidak meminta solusi Javascript, terutama bukan plugin jQuery. Tetap berpegang pada apa yang diminta.
TheCarver