Problema con una animación en CSS3

[uSources]

Hola a todos, estoy realizando una pagina por cuenta propia, para practicar , y me ha surgido una duda a la hora de realizar una animación en CSS3.

Tengo un div con este codigo:

La finalidad de este código es crear un disco con una portada:

Código HTML:

#player{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	border-radius: 400px;
	border:5px solid black;
	margin-left: -200;
	margin-top: -200;
	background-image: url("../img/covers/1.jpg");
	background-size:600px 600px;
	background-attachment: fixed;
	background-position: center; 
}

A mi me gustaría que cuando cargara la pagina realizaría la siguiente animación,que el disco girara continuadamente:

Código HTML:

#player:hover{
-moz-animation:10s rotation infinite;
-webkit-animation:10s rotation infinite;

}
@-moz-keyframes rotation {
  100% {
   -moz-transform:rotate(360deg)-;
  }

}
@-webkit-keyframes rotation {

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

Pero a la hora de repetir la animación de nuevo, se para por unos segundos y vuelve a repetirla, como puedo evitar eso? Quiero dar la impresión de que el disco este continuamente girando, sin que se pare en ningún momento.

Muchas Gracias

[pzin]

No veo por ningún lado la declaración donde indicas que #player que use la animación.

En cualquier caso, tal vez sea porque por defecto el valor de animation-timing-function es igual a ease, que corresponde a una Curva de Bézier de 0.25 - 0.1 - 0.25 - 1. Entonces la animación no es lineal.

Aquí más información al respecto: http://www.w3.org/TR/css3-transition...iming-function

[uSources]

Iniciado por pzin

No veo por ningún lado la declaración donde indicas que #player que use la animación.

En cualquier caso, tal vez sea porque por defecto el valor de animation-timing-function es igual a ease, que corresponde a una Curva de Bézier de 0.25 - 0.1 - 0.25 - 1. Entonces la animación no es lineal.

Aquí más información al respecto: [url]http://www.w3.org/TR/css3-transitions/#transition-timing-function[/url]

Muchas gracias por esta respuesta, pero el problema sigue estando, es decir cuando la animación llega al 100%, a la hora de volver a repetirla, no es instántaneo , es decir, espera un poco y vuelve a comenzar de nuevo la animación, a mi me gustaria saber si hay forma de quitar ese tiempo de estera entre animación y animación.

[pzin]

Como digo no se ve en tu código la declaración de animation.

Si pones que la animación sea lineal, entonces no se verá parón alguno:

Animación lineal:


Animación por defecto:

[juangemelo01]

Iniciado por uSources

Código HTML:

#player:hover{
-moz-animation:10s rotation infinite;
-webkit-animation:10s rotation infinite;

}
@-moz-keyframes rotation {
  100% {
   -moz-transform:rotate(360deg)-;
  }

}

ya observaste el '-' que tienes antes de ';' en el moz-transform que prácticamente esta de mas

revisa esta animación que hice de ejemplo, tal vez te sirva
http://codepen.io/elestudiantefantasma/pen/ezcto

PD: animation-timing-function: linear; con eso, no deberias tener ese problema que mencionas, asegurate de dejarlo asi y con sus prefijos