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>