css - sencillo - video reloj solar

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

Question

Estoy tratando de replicar un indicador de actividad de estilo Apple (icono de carga de reloj de sol) mediante el uso de 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.

@-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 importa, si la desaceleras, digamos 5s, es más evidente que después de la primera rotación hay una pausa antes de que vuelva a girar. Es esta pausa de la que me quiero deshacer.

Cualquier ayuda es muy apreciada, gracias.

Answer 1

Hice una pequeña biblioteca que te permite usar fácilmente un throbber 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 .

Answer 2

Podría usar animaciones como esta:

-webkit-animation: spin 1s infinite linear;

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

Answer 3

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

Answer 4

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

Answer 5

También puede notar un pequeño retraso porque 0deg y 360deg son el mismo punto, por lo que va del punto 1 en un círculo al punto 1. Es realmente insignificante, pero para solucionarlo, todo lo que tiene que hacer es cambiar 360deg a 359deg

mi jsfiddle ilustra tu animación:

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

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

Además, lo que podría ser más parecido al icono de carga de la manzana sería una animación que transiciones la opacidad / color de las rayas de gris en lugar de girar el icono.

Answer 6

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é navegador está probando?)

Si es posible, reemplace el .png con algo nativo.

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

Chrome no me da pausa usando este método.