CSS3 Ruota animazione


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

Impossibile far funzionare questa immagine animata, si suppone che esegua una rotazione di 360 gradi.

Immagino che ci sia qualcosa che non va nel CSS sotto, dato che rimane fermo.

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

Risposte:


521

Ecco una demo . Il CSS di animazione corretto:

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


Alcune note sul tuo codice:

  1. Hai nidificato i fotogrammi chiave all'interno della .imageregola e non è corretto
  2. float:left non funzionerà su elementi assolutamente posizionati
  3. Dai un'occhiata a caniuse : IE10 non ha bisogno del -ms-prefisso

13
Se qualcuno prova questo nel proprio codice: NON DIMENTICARE LA sezione @ in fondo
Jack M.

Ciao Posso interrompere la rotazione infinita dell'animazione dopo 5 secondi?
MD Ashik,

16
Ho quasi sputato l'acqua quando ho eseguito l'animazione.
Razgriz,

" float:left won't work on absolutely positioned elements", tuttavia, li ridurrà alle dimensioni minime, in modo simile a quanto visualizzato: inline-block fa
gregn3

32

Ho un'immagine rotante che usa la stessa cosa di te:

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

1
aggiungere: transform:rotate(360deg);per IE
Dusty

3
Scegli esempi locali su collegamenti a siti Web interrotti.
evolutionxbox

Il collegamento è interrotto ora.
Markus Bucher,

30

Per ottenere la rotazione a 360 gradi, ecco la soluzione di lavoro .

HTML:

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

Il CSS:

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

Devi passare il mouse sull'immagine e otterrai l'effetto di rotazione a 360 gradi.

PS: aggiungi -webkit-un'estensione affinché funzioni su Chrome e altri browser webkit. QUI puoi controllare il violino aggiornato per il webkit


Il violino non funziona oO L'ispettore di Chrome non gradisce il tuo CSS, in particolare la "trasformazione" e la "proprietà di transizione". Oh caro.
Just Plain High,

1
Per questo è necessario aggiungere un -webkit-tranformper farlo funzionare. Ecco il violino aggiornato. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh

1
2017: questo è ora molto ben supportato e un modo preferito per fare rotazioni non infinite. -webkit-il prefisso non è più necessario e può essere rimosso in modo sicuro. Supporto per browser: caniuse.com/#search=transforms
Alph.Dev

2

se vuoi capovolgere l'immagine puoi usarla.

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

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


0

prova così facilmente

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


-6

Qui questo dovrebbe aiutarti

Il seguente link jsfiddle ti aiuterà a capire come ruotare un'immagine. Ho usato lo stesso per ruotare il quadrante di un orologio.

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();

Dove: • t: ora corrente,

• b: valore begInnIng,

• c: modifica del valore,

• d: durata,

• x: non utilizzato

Nessun allentamento (allentamento lineare): funzione (x, t, b, c, d) {return b + (t / d) * c; }


2
Gradirei questa risposta se fornissi un po 'più di informazioni (come fai nel violino). Sento anche che dovresti menzionare che questo è un plug-in jQuery perché ero tipo "Non sapevo che jQuery potesse farlo !!! ^ _ ^ guarda il violino Oh aspetta ... U_U"
Just Plain High

2
una spiegazione delle variabili x, t, b, c, d (come si fa nel violino) e affermando chiaramente che sebbene non sia una soluzione CSS come richiesto da OP, è una soluzione plug-in jQuery piuttosto semplice ed efficace: )
Just Plain High,

3
Downvoted. L'OP non ha richiesto una soluzione Javascript, in particolare non un plug-in jQuery. Attenersi a ciò che viene chiesto.
TheCarver
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.