CSS3 rodar a animação

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

não pode fazer esta imagem animada funcionar, é suposto fazer uma rotação de 360 graus.

Acho que há algo de errado com o CSS lá em baixo, pois fica parado.

.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); 
        }
    }
}
Author: Alexis Wilke, 2013-05-27
Source

5 answers

Aqui está um demonstração. A animação correcta CSS: 

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

Algumas notas no seu código:

  1. aninhaste os nomes das chaves dentro da regra .image, e isso está incorrecto
  2. float:left não funcionará em elementos absolutamente posicionados
  3. dê uma olhada em caniuse {[[9]}: IE10 não precisa do prefixo -ms-
 381
Author: Giona, 2015-12-17 20:02:00

Tenho uma imagem em rotação usando a mesma coisa que tu: 

.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);
}
 24
Author: Ryan de Vries, 2017-05-04 14:47:00

Para atingir a rotação de 360 graus, aqui está a solução de trabalho.

O HTML:

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

O CSS:

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

Você tem que pairar sobre a imagem e você vai ter o efeito de rotação de 360 graus.

PS: adicione uma extensão -webkit- para que funcione no chrome e noutros navegadores webkit. Você pode verificar o fiddle atualizado para webkit toma.

 21
Author: Nitesh, 2015-12-25 07:12:19

Se quiser inverter a imagem, pode usá-la.

.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); } }
 1
Author: Heo Đất Hades, 2014-11-07 05:06:26
Isto deve ajudar-te.

A ligação jsfiddle abaixo irá ajudá-lo a compreender como rodar uma imagem.Usei o mesmo para rodar o mostrador de um relógio.

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

Onde: * t: tempo actual,

• b: valor inicial,

• C: variação de valor,

• D: duração,

• x: não utilizado

Sem abrandamento (abrandamento linear): função (x, t, b, c, d) { return B+(t/d)*C;}
 -5
Author: Abhi, 2014-05-09 09:53:56