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
