@keyframes 애니메이션이 파이어 폭스에서 작동하지 않습니다. 55.03

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

감사합니다. 레니

은 ...

다음

새로운 정보가 내가 더 명확하게 내 문제 설명에 추가 할입니다 ... 0913, 9/22/17 업데이트

1. 이것은 어린이 테마가있는 WordPress 사이트입니다. 내 자식 테마의 스타일 시트는 모두 @keyframes 코드 및 페이지의 요소에 대한 CSS 코드를 포함합니다. 즉, 애니메이션 코드에 대한 별도의 스타일 시트가 없습니다.

2. 내 자식 스타일 시트의 @keyframes 섹션은 앵커 요소의 애니메이션을 설명하는 CSS 코드 바로 위에 있습니다. 애니메이션이 파이어 폭스에서 작동 할 수 있도록 아래 lanosmind의 대답/reccomendation 다음

   는

, 나는 @keyframes button-flash 섹션 위의 @-moz-keyframes button-flash 섹션을 삽입했다. 안타깝게도 @moz-keyframes-button-flash 섹션을 추가해도 도움이되지 않았습니다.

@-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; 
} 

사람이 내가 파이어 폭스에서이 앵커 애니메이션을 시도 할 수있는 다른 일을 제안 할 수 있습니다 :

은 그래서 지금,이 앵커 요소에 대한 내 수정 @keyframes 코드와 CSS 코드는 다음과 같습니다? 대단히 감사합니다. (1) "기본"요소의 배경 색상과 색상 스타일을 삭제 :

Answer 1

당신은 내가 만 파이어 폭스에 제시된이 문제를 해결

Answer 2

크로스 브라우저 지원뿐만 아니라 @ -moz-키 프레임을 사용할 필요가 @ -moz-keyframes 섹션의 동일한 코드가 가장 먼저 허용되고 (2) 스타일 시트에서이 요소의 전체 코드 섹션을 아래로 낮추십시오.

레니