Animación de rotación continua de CSS3 (como un reloj de sol de carga)

116

Estoy intentando replicar un indicador de actividad de estilo de Apple (icono de carga de reloj de sol) mediante una animación PNG y CSS3. Tengo la imagen girando y haciéndola continuamente, pero parece haber un retraso después de que la animación ha terminado antes de que haga la siguiente rotación.Animación de rotación continua de CSS3 (como un reloj de sol de carga)

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 
#loading img 
{ 
    -webkit-animation-name:    rotate; 
    -webkit-animation-duration:   0.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function: linear; 
    }

He intentado cambiar la duración de la animación pero no hace ninguna diferencia, si bien lento hacia abajo decir 5s es sólo más evidente que después de la primera rotación se produce una pausa antes de que se gira de nuevo. Es esta pausa de la que me quiero deshacer.

Cualquier ayuda es muy apreciada, gracias.

Fuente

2010-04-06 Gcoop

+14

código en Webkit específica no significa que sea menos CSS3 .. teniendo en cuenta que ninguno de los otros proveedores no proporcionan funciones iguales en ese momento :) –

No debería la animación se ejecuta de 0 a 359? Si se ejecutó de 0 a 360, entonces tendría el marco en 0 reproducido dos veces, ya que el cuadro 0 y el cuadro 360 serían los mismos ... –

@BradParks Por otro lado, si pasa de 0 a 359, entonces la animación que debería tener lugar en 359.5 se omite por completo. En la mayoría de los casos, la superposición de 0 y 360 será tan rápida que será imperceptible. – Blazemonger

Su problema aquí es que ha suministrado un -webkit-TRANSITION-timing-function cuando quiere un -webkit-ANIMATION-timing-function. Sus valores de 0 a 360 funcionarán correctamente.

Fuente

2010-06-16 14:38:09 rrahlf

Awesome thank you – Gcoop

Un típico error de copiar y pegar. ¡Muchas gracias! (De hecho, obtuve mi CSS de [shareaholic] (http://www.shareaholic.com/) y debido a la propiedad llamada erróneamente, usó la función de temporización 'ease' predeterminada). – doekman

Tu código parece correcto. Supongo que tiene algo que ver con el hecho de que está utilizando un .png y la forma en que el navegador redibuja el objeto al girar es ineficiente, causando la caída (¿con qué explorador está probando?)

Si es posible, reemplace .png con algo nativo.

see; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome no me permite hacer pausas con este método.

Fuente

2010-04-06 10:52:24 Alex

Perfecto, estoy bastante seguro de que tu suposición es correcta, sin embargo, estoy usando un PNG porque mi ícono de carga no es un reloj de sol, es un símbolo de estilo nuclear ... No tiene que ser así, así que puedo cambiarlo al método que sugieres, ¡gracias! – Gcoop

Si sólo está buscando una versión de WebKit esto es hábiles: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html de http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

Fuente

2010-10-28 05:51:52 Tudorizer

Muy bueno. De hecho, colecciono spinners, tanto 'GIF' como' CSS'. [Mi colección] (http://zanstra.home.xs4all.nl/picks/progress.html#css_animations). Si sabes más, házmelo saber. – doekman

Esos son algunos hilanderos épicos. Buen trabajo. –

También puede notar un poco de retraso debido a 0 grados y 360deg son el mismo lugar, por lo que va de punto 1 en una círculo de nuevo a terreno 1. es realmente insignificante, pero solucionarlo, todo lo que tiene que hacer es cambiar 360deg a 359deg

my jsfiddle illustrates your animation:

#myImg { 
    -webkit-animation: rotation 2s infinite linear; 
} 

@-webkit-keyframes rotation { 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(359deg);} 
}

también lo que podría ser más resemblant del ico carga de manzana n sería una animación que transiciones la opacidad/color de las rayas de gris en lugar de girar el ícono.

Fuente

2012-09-03 03:52:42

Su JS Fiddle contiene la implementación más sucinta que he visto para la rotación simple de imágenes, perfecta (y gracias por publicarla). –

gracias, avíseme si necesita alguna otra ayuda, por cierto, utilicé los prefijos de webkit para la animación pero también debe incluir los prefijos de mozilla porque usan la regla -moz-css en su lugar. –

también puede multiplicar el tiempo y el ángulo por 100, es decir. 0 grados a 36000 grados :-) –

Hice un small library que le permite usar fácilmente una palpita sin imágenes.

Utiliza CSS3 pero vuelve a entrar en JavaScript si el navegador no lo admite.

// First argument is a reference to a container element in which you 
// wish to add a throbber to. 
// Second argument is the duration in which you want the throbber to 
// complete one full circle. 
var throbber = throbbage(document.getElementById("container"), 1000); 

// Start the throbber. 
throbber.play(); 

// Pause the throbber. 
throbber.pause();

Example.

Fuente

2013-08-21 07:26:03 alex

Se podría utilizar la animación de esta manera:

-webkit-animation: spin 1s infinite linear; 

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

Fuente

2013-12-31 08:14:01 Kinglybird

¡Solución increíble y fácil! –

Animación de rotación continua de CSS3 (como un reloj de sol de carga)

Respuesta

Cuestiones relacionadas