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

파이어 폭스에서 코드가 작동하지 않아 그 이유를 모르겠습니다. 조언? 그것은 크롬, IE와 오페라에서 잘 작동합니다. 거의 모든 접두사 조합을 시도했지만 여전히 작동하지 않습니다. 내 PC 또는 Firefox 브라우저에 문제가있을 수 있습니까?파이어 폭스에서 CSS 애니메이션이 작동하지 않습니다.

.span-accent { 
 
    color: rgb(60, 185, 120); 
 
    -webkit-animation: breath 2s infinite; 
 
    -moz-animation: breath 2s infinite; 
 
    animation: breath 2s infinite; 
 
} 
 

 
@-webkit-keyframes breath { 
 
    0% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
    25% { 
 
     -webkit-transform: scale(1.2); 
 
     transform: scale(1.2); 
 
    } 
 
    50% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
    75% { 
 
     -webkit-transform: scale(1.2); 
 
     transform: scale(1.2); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
} 
 

 
@-moz-keyframes breath { 
 
    0% { 
 
     -moz-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
    25% { 
 
     -moz-transform: scale(1.2); 
 
     transform: scale(1.2); 
 
    } 
 
    50% { 
 
     -moz-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
    75% { 
 
     -moz-transform: scale(1.2); 
 
     transform: scale(1.2); 
 
    } 
 
    100% { 
 
     -moz-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
} 
 

 
@keyframes breath { 
 
    0% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
    25% { 
 
     -webkit-transform: scale(1.2); 
 
     transform: scale(1.2); 
 
    } 
 
    50% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
    75% { 
 
     -webkit-transform: scale(1.2); 
 
     transform: scale(1.2); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 
}

<h1>LAKA</h1> 
 
<h2>architecture that <span class="span-accent">reacts.</span></h2>

출처

2015-02-05 Wojciech Dobry

'-moz-transform : scale (1); -webkit-transform : scale (1);'왜 웹킷인가? – Morpheus

@Morpheus의 제안에 따라 키 프레임에 올바른 접두어를 사용하십시오. – fcalderan

'-moz-transform : scale (1); transform : scale (1);'이 방법으로도 작동하지 않습니다 –

좋아 얘들 아, 나는 그것을 발견했다.

문제는 <span> 요소에 있습니다. Firefox는 인라인 요소를 움직이지 않습니다.

내가 한 것은 <span> 공헌을 display: inline-block으로 변경하는 것입니다. 그냥 inline 요소에 대해 엄격하게 작동하지 않습니다.

출처

2015-02-05 14:15:03

내 의견이 도움이 된 것 같습니다 :) – Morpheus

그래, 고마워.)! –

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

답변

관련 문제