@keyframes 动画在 Firefox 55.03 中不起作用答案

【问题标题】：@keyframes animation not working in firefox 55.03@keyframes 动画在 Firefox 55.03 中不起作用
【发布时间】：2018-03-03 00:17:20
【问题描述】：

我无法在 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;
   }

谢谢。莱尼

2017 年 9 月 22 日更新，0913...

这是我想添加到我的问题描述中以进一步澄清的新信息......

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

按照下面 lanosmind 的回答/建议，我在 @keyframes button-flash 部分上方插入了 @-moz-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 中为这个锚设置动画的其他东西？非常感谢。

【问题讨论】：

标签： css wordpress animation firefox keyframe

【解决方案1】：

您还需要使用@-moz-keyframes 来支持跨浏览器

【讨论】：

【解决方案2】：

我通过以下方式解决了这个仅在 Firefox 中出现的问题： (1) 删除“默认”元素的背景颜色和颜色样式，这些样式允许@-moz-keyframes 部分中的相同代码位于最前面，并且 (2) 将该元素的整个代码部分移到样式表的下方。

莱尼

【讨论】：