Foros del Web » Creando para Internet » CSS »

Problema con una animación en CSS3

Estas en el tema de Problema con una animación en CSS3 en el foro de CSS en Foros del Web. Hola a todos, estoy realizando una pagina por cuenta propia, para practicar , y me ha surgido una duda a la hora de realizar una ...
  #1 (permalink)  
Antiguo 30/10/2014, 14:12
 
Fecha de Ingreso: enero-2013
Mensajes: 6
Antigüedad: 11 años, 1 mes
Puntos: 1
Pregunta Problema con una animación en CSS3

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
  #2 (permalink)  
Antiguo 30/10/2014, 15:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con una animación en CSS3

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
__________________
(:
  #3 (permalink)  
Antiguo 30/10/2014, 16:36
 
Fecha de Ingreso: enero-2013
Mensajes: 6
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Problema con una animación en CSS3

Cita:
Iniciado por pzin Ver Mensaje
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.
  #4 (permalink)  
Antiguo 31/10/2014, 11:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con una animación en CSS3

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:
__________________
(:
  #5 (permalink)  
Antiguo 03/11/2014, 00:36
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Problema con una animación en CSS3

Cita:
Iniciado por uSources Ver Mensaje
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

Etiquetas: background, css3, hover, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:36.