CSS3 Spin Animation


158

He revisado algunas demostraciones y no tengo idea de por qué no puedo hacer que funcione el giro CSS3. Estoy usando la última versión estable de Chrome.

El violín: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}
<div></div>

Respuestas:


299

Para usar CSS3 Animation, también debe definir los fotogramas clave de animación reales ( que ha nombradospin )

Lea https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations para más información

Una vez que haya configurado el tiempo de la animación, debe definir la apariencia de la animación. Esto se hace estableciendo dos o más fotogramas clave utilizando la @keyframesregla at. Cada fotograma clave describe cómo debe representarse el elemento animado en un momento dado durante la secuencia de animación.


Demostración en http://jsfiddle.net/gaby/9Ryvs/7/

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

9
Obtiene ✓ porque lo explicó mejor y es la única respuesta que incluye todas las versiones prefijadas.
iambriansreed

53
Esto es súper quisquilloso, pero realmente deberías animarlo a 359 grados. 360 y 0 grados son los mismos radialmente, por lo que la animación se detendría brevemente en un giro completo.
Adam Grant

1
@AdamGrant Gracias, esto casi me ha causado dolor de cabeza hoy jajaja
mattslone

55
Desea animar a 359.9999999999 grados, no 359. Los grados de rotación son un rango continuo de [0, 360) y si gira a 359.0 tendrá un tic de 1 grado al comienzo de cada rotación cuando se deforma de 359 a 0 .
mdonoughe

16
Para aclarar todos estos comentarios que están dando información incorrecta ... la respuesta seleccionada ES CORRECTA sin modificaciones. 0 y 360 grados son realmente diferentes a los ojos del navegador, sin dejar de ser el mismo punto. Por ejemplo, si intenta rotarlo de 0 grados a 0 grados (o 360 grados a 360 grados), no rotará en absoluto. Girarlo de 0 grados a 360 grados le dice al navegador que gire el objeto 360 grados antes de completar la animación. Establezca animation-iteration-count: infinite;y tendrá infinitos cuadros en la animación. Incluso una rotación de 20 minutos se verá perfecta y suave.
jacurtis

28

No ha especificado ningún fotograma clave. Lo hice funcionar aquí .

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

De hecho, puedes hacer muchas cosas realmente geniales con esto. Aquí hay uno que hice antes .

:)

Nota : puede omitir tener que escribir todos los prefijos si usa -prefix-free .


17

A partir de la última versión de Chrome / FF y en IE11 no es necesario el prefijo -ms / -moz / -webkit. Aquí hay un código más corto (basado en respuestas anteriores):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Demostración en vivo: http://jsfiddle.net/9Ryvs/3057/


55
Combina reglas de animación con taquigrafía animation: spin 4s linear infinite.
Josh Habdas

10

HTML con fuente de glifos impresionante.

<span class="fa fa-spinner spin"></span>

CSS

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}

1
También recibiste mi voto positivo por agregar la definición de .spin
Blair Connolly

6

La única respuesta que da el 359deg correcto:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

Aquí hay un gradiente útil para que pueda probar que está girando (si es un círculo):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

4

Para rotar, puede usar fotogramas clave y una transformación.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

Ejemplo


4

Para completar, aquí hay un ejemplo de Sass / Compass que realmente acorta el código, el CSS compilado incluirá los prefijos necesarios, etc.

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.