activar framekey con javascript para navegadores moz

wsoul · #1 (**permalink**) 24/02/2012, 19:06

Hola,

estoy intentando activar un framekey con javascript, pero solo lo consigo para navegadores webkit.

el tema, es que depende de la posición de del offsetleft se activa una u otra, por eso no me sirve un hover.

Código Javascript:

Ver originaldocument.getElementById('nombre').style.webkitAnimationName= "nombre";
document.getElementById('nombre').style.webkitAnimationDuration = "1s";         document.getElementById('nombre').style.webkitAnimationIterationCount = "20";

con chrome funciona, pero con mozilla no, y la verdad estoy un poco rallado ya, he buscado mucha información y no lo encuentro.

igual es una pregunta fácil, o no busco lo adecuado, pero es que no soy capaz.

aun no probe a probar otras opciones, como cambiarle la clase etc, por que como los valores son "dinámicos" me complicaría un poco mas.

si alguien sabe como adaptar lo de arriba para mozilla que me lo diga pls!! gracias.

Panino5001 · #2 (**permalink**) 24/02/2012, 20:10

Probaste repetir esas líneas pero reemplazando webkit por moz?

wsoul · #3 (**permalink**) 25/02/2012, 02:50

claro, pero no hay manera

Panino5001 · #4 (**permalink**) 25/02/2012, 07:03

Creo que es porque no estás camelizando correctamente: en lugar de webkit, deberías usar Webkit, ya que la -w debe convertirse en W, no en w.
Y lo mismo para moz u otros vendors.
Por ejemplo, esto funciona sin problemas en Chrome y en Firefox:

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style> 
@-moz-keyframes nombre{ 
    from{ 
        left:0; 
    } 
    to{ 
        left:200px;         
    } 
     
} 
@-webkit-keyframes nombre{ 
    from{ 
        left:0; 
    } 
    to{ 
        left:200px;         
    } 
     
}     
#pp{ 
    position:absolute; 
    width:50px;  
    height:50px; 
    left:0; 
    background:red; 
    /*-moz-animation-name: nombre; 
    -moz-animation-duration: 3s; 
    -moz-animation-iteration-count: 4; 
    -moz-animation-direction: alternate; 
    -moz-animation-timing-function: ease-in-out;*/ 
} 
</style> 
<script type="text/javascript"> 
onload=function(){ 
    var el=document.getElementById('pp'); 
    el.style.WebkitAnimationName= "nombre"; 
    el.style.WebkitAnimationDuration = "3s"; 
    el.style.WebkitAnimationDirection = "alternate"; 
    el.style.WebkitAnimationIterationCount = "4"; 
    el.style.WebkitAnimationTimmingFunction = "ease-in-out"; 
     
    el.style.MozAnimationName= "nombre"; 
    el.style.MozAnimationDuration = "3s"; 
    el.style.MozAnimationDirection = "alternate"; 
    el.style.MozAnimationIterationCount = "4"; 
    el.style.MozAnimationTimmingFunction = "ease-in-out"; 
} 
</script> 
 
</head> 
 
<body> 
<div id="pp"></div> 
</body> 
</html>

wsoul · #5 (**permalink**) 25/02/2012, 12:13

gracias, pues que raro, por que me había fijado en eso y lo intentara escribiéndolo correctamente.

de todas formas, lo acabo de pillar de otra forma :P xDD (es lo mismo)

Código Javascript:

Ver originaldocument.getElementById('nombre').style['MozAnimationName']= "nombre";
                document.getElementById('nombre').style['MozAnimationDuration'] = "1s";
                document.getElementById('nombre').style['MozAnimationIterationCount'] = "20";