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

Posted 2023-03-06

【中文标题】@keyframes 动画在 Firefox 55.03 中不起作用

【英文标题】：@keyframes animation not working in 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 中为这个锚设置动画的其他东西？ 非常感谢。

【参考方案1】：

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

【参考方案2】：

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

莱尼