Анимация @keyframes не работает в Firefox 55.03

Я не могу заставить это работать с 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;
   }

Спасибо. Ленни

Обновлено 22.09.17, 0913...

Вот НОВАЯ информация, которую я хотел бы добавить к моему описанию проблемы, чтобы уточнить...

1. Это сайт WordPress с дочерней темой. Таблица стилей моей дочерней темы включает и код @keyframes, и код css для элементов на странице. Другими словами, у меня нет отдельной таблицы стилей для кода анимации.

2. Раздел @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? Большое спасибо.