slash: CSS Animation -> Funktioniert in chrome, aber nicht in Firefox

Beitrag lesen

Hallo,

ich habe hier eine einfache css3-animation die den Hintergrundfarbenwechsel eines linkes animiert. Das funktioniert auch wunderbar, nur leider im Firefox nicht.

Hat jemand eine Idee warum, das ganze nicht funktionert?

<html>  
<head>  
<style type="text/css">  
  
.flRowEven{  
	width:100px;  
	  
}  
  
@-webkit-keyframes fade {  
from {  
    background:red;  
    -webkit-transform: background-color;  
	-moz-transform: background-color;  
}  
to {  
    background:blue;  
    -webkit-transform: background-color;  
	-moz-transform: background-color;  
    }  
}  
  
  
  
.flRowEven  {  
    -webkit-animation-name: fade;  
    -webkit-animation-iteration-count: 1;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 1s;  
	  
	-moz-animation-name: fade;  
    -moz-animation-iteration-count: 1;  
    -moz-animation-timing-function: linear;  
    -moz-animation-duration: 1s;  
}  
  
</style>  
</head>  
  
<body>  
  
<div>  
	<a href="#" onclick="document.getElementsByTagName('div')[0].className='flRowEven'">link</a>  
</div>  
  
</body>  
</html>