动画在 FF 和 IE 中不起作用..？

Question

我已经为下拉菜单应用了某些动画。它在 Chrome 中可以正常工作，但在 FF n IE 中却不行。请让我知道我哪里出错了..

这是我现在的 JS 小提琴： Demo

这里是 HTML 部分..

<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>

这是 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%);
}

请让我知道我哪里出错了......

Answer 1

@-moz-keyframes fadeInOut { 来自 { -webkit-transform：旋转（0度）； 字体大小：0px； } 至 { -webkit 变换：旋转（1440 度）； 字体大小：15px； } }

您应该将那些 -webkit- 替换为 -moz-。