Ver Mensaje Individual
  #9 (permalink)  
Antiguo 08/02/2013, 06:51
Davi91
 
Fecha de Ingreso: noviembre-2011
Ubicación: Sevilla
Mensajes: 48
Antigüedad: 13 años
Puntos: 1
Respuesta: Retraso efecto :hover al aplicar animation

Exáctamente, porque no debe haberlas. Es decir, no he animado los enlaces de ninguna forma -al menos directamente que yo sepa- y sin embargo se produce ese delay en el :hover

la única propiedad del :hover es un cambio de color no creo que esté ahí el problema, todo viene cuando inserto la animación de las imágenes de background..

Código:
Si elimino estas líneas desaparece el error, pero no funciona, evidentemente, la animación del fondo.
.movimiento {
    -webkit-animation: imageAnimation 24s linear infinite 0s;
    -moz-animation: imageAnimation 24s linear infinite 0s;
    -o-animation: imageAnimation 24s linear infinite 0s;
    -ms-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s;
}
que activa esta animación..

Código:
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05) rotate(3deg);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 0 }
}
en este elemento...

Código:
<div class="fija">
    <div class="movimiento" id="imagen1"></div>
    <div class="movimiento" id="imagen2"></div>
    [...]
</div>