Animation not working in FF and IE..? - html

Question

I have applied certain animations for drop down menu.. It works fine in Chrome but not in FF n IE.. Will u please let me know where I am going wrong..
Here is the JS fiddle what I am upto now:
Demo
here is the HTML part..
<div id="back">
<div class="wrapper">
<div class="container">
<ul id="menu" class="menu">
<li id="l1" runat="server" class="active"><a class="link1" href="Home.aspx" runat="server" id="a1">Home</a></li>
<li id="l2" runat="server"><a runat="server" class="link1" href="?id=History" id="a2">About MCB<img src="Images/Other%20Images/dropdown.png" style="position:absolute;margin-right:0px; top: -3px; left: 138px;"/></a>
<ul>
<li id="l21" runat="server"><a runat="server" class="link1" href="?id=Members" id="a21">Member details</a></li>
<li id="l22" runat="server"><a runat="server" class="link1" style="width:116px;" href="?id=History" id="a22">History</a></li>
</ul>
</li>
<li id="l3" runat="server"><a runat="server" href="?id=Photos" class="link1" id="a3">Gallery<img src="Images/Other%20Images/dropdown.png" style="position:absolute;top: -3px; float:right;right:-8px; z-index:1000;"/></a>
<ul id="gl">
<li id="L31" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Photos" id="a15">Photos</a></li>
<li id="L32" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Videos" id="a16">Videos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
and here is the Css:
.wrapper {
width: 100%;
height: 40px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px ridge #939393;
position: relative;
top:19px;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 30px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
position:relative;
}
ul.menu li {
list-style: none;
float:left;
height: 39px;
display:inline-block;
text-align: center;
position:relative;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul.menu li ul li
{
display: block;
float: none;
clear: left;
}
.menu li:not(:hover) ul {
display: none;
}
#-webkit-keyframes fadeInOut{
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
#-moz-keyframes fadeInOut {
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
#-o-keyframes fadeInOut {
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
#keyframes fadeInOut {
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
.menu li:hover ul {
display: inline-block;
-webkit-animation: fadeInOut 1s;
-moz-animation: fadeInOut 1s;
-o-animation: fadeInOut 1s;
animation: fadeInOut 1s;
}
ul.menu li ul li a
{
clear: left;
line-break: strict;
display:inline-block;
position:relative;
font-size:18px;
}
.link1 {
display: block;
text-decoration: none;
font-family:'Adobe Garamond Pro';
color: White;
font-size: 22px;
font-weight:bolder;
padding: 0 30px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 39px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-moz-transition-property: background;
transition-property:background;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.link1:hover {
background: transparent none;
}
ul li.active .link1{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
color:black;
background:-o-linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
background:linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
Please let me know where I am going wrong...

Answer 1

#-moz-keyframes fadeInOut { from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
You should replace those -webkit- with -moz-.