Question

我无法使用Firefox。我动画了一个改变背景颜色，颜色和边框的菜单项锚。动画在MS IE，Chrome，Opera中运行良好，但不适用于Firefox。

这是我的css @keyframes：

 @-webkit-keyframes button-flash {
        0% {background-color:rgba(255,85,51,0.9);color:#fff;}
        40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
        80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
        100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
    }

    @keyframes button-flash {
        0% {background-color:rgba(255,85,51,0.9);color:#fff;}
        40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
        80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
       100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
   }

这是我的css元素：

    ul#main-menu > li#menu-item-22 > a,
    ul#main-menu > li#menu-item-196 > a{
        color:#fff !important;
        background-color:rgba(255,85,51,0.9) !important;
        border:1px dotted transparent !important;

    -webkit-animation-name:button-flash;
    -webkit-animation-duration:1.5s;
    -webkit-animation-iteration-count:infinite;

   animation-name:button-flash;
   animation-duration:1.5s;
   animation-iteration-count:infinite;
   }

谢谢。莱尼

更新于9/22 / 2017,9913 ......

以下是我想在问题描述中添加的新信息，以便进一步澄清...

这是一个带有子主题的WordPress网站。我的孩子主题的样式表包括两个 @keyframes代码和页面上元素的css代码。换句话说，我没有动画代码的单独样式表。
我的子样式表中的@keyframes部分位于描述锚元素动画的css代码的正上方。

在下面的lanosmind的回答/推荐之后，我在@-moz-keyframes button-flash部分上方插入了@keyframes button-flash部分，以便动画可以在FireFox上运行。不幸的是，添加@moz-keyframes-button-flash部分没有帮助。

现在，我修改的@keyframes代码和这个锚元素的css代码如下所示：

@-webkit-keyframes button-flash {
    0% {background-color:rgba(255,85,51,0.9);color:#fff;}
    40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
    80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
    100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
@-moz-keyframes button-flash {
    0% {background-color:rgba(255,85,51,0.9);color:#fff;}
    40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
    80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
    100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}
@keyframes button-flash {
    0% {background-color:rgba(255,85,51,0.9);color:#fff;}
    40% {background-color:rgba(0,179,179,0.4);color:#000;border-style:dotted;border-width:1px;border-color:#000;}
    80% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
    100% {background-color:rgba(255,85,51,0.9);color:#fff;border-style:dotted;border-width:1px;border-color:transparent;}
}

ul#main-menu > li#menu-item-22 > a,
ul#main-menu > li#menu-item-196 > a{
    color:#fff !important;
    background-color:rgba(255,85,51,0.9) !important;
    border:1px dotted transparent;
-webkit-animation-name:button-flash;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;

-moz-animation-name:button-flash;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;

animation-name:button-flash;
animation-duration:1.5s;
animation-iteration-count:infinite;
}

任何人都可以建议我可以尝试在Firefox中设置此锚点的动画吗？非常感谢你。

Answer 1

您需要使用@ -moz-keyframes以及跨浏览器支持

Answer 2

我解决了这个仅在Firefox中出现的问题：（1）删除“default”元素的背景颜色和颜色样式，这些样式允许@ -moz-keyframes部分中的相同代码成为最重要的，并且（2）在样式表中将此元素的整个代码部分向下移动。

莱尼

@keyframes动画在firefox 55.03中无效

2 个答案: