Firefox의 CSS3 애니메이션 및 배경 이미지

내 웹 사이트에 약간의 CSS3 애니메이션이 있지만 Safari에서 제대로 작동하지만 Firefox에서 사이트를 실행할 때 애니메이션이 적용되지 않습니다. 나는이 사이트가 나는Firefox의 CSS3 애니메이션 및 배경 이미지

background:color;

이러한 변경했다 경우

background-image:url('');

후 작동 칠 때 문제가 발생하는 것으로 나타났습니다

이제

.ad{ 
position:relative; 
left:740px; 
top:240px; 
width:260px; 
height:195px; 
background-image:url('ad1.png'); 

animation:myfirst 4s; 

-webkit-animation:myfirst 4s; /* Safari and Chrome */ 
-webkit-animation-delay:2s; 
-webkit-animation-duration:0s; 
-webkit-animation-fill-mode: forwards; 
} 

@keyframes myfirst 

{ 
    from {background-image:url('ad1.png')} 
    to {background-image:url('ad2.png')} 

} 


@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
    from {background-image:url('ad1.png');} 
    to {background-image:url('ad2.png');} 
} 
}

: 여기에 코드입니다 , 분명히 나는 이미지를 사용하고 싶다. 나는 -moz- 접두사를 추가하려고했지만 작동하지 않습니다. 내가 뭘 놓치고 있니? 파이어 폭스 파이어 폭스

출처

2013-07-21 Jcmoney1010

이미지 파일이이 CSS 파일과 같은 디렉토리에 있습니까? –

다른 컨테이너를 사용하여 FF로 위조 할 수 있습니다. 각 요소는 2 개의 추가 pseudo container :: before & :: after를 가질 수 있습니다. 예 : http://codepen.io/gcyrillus/pen/DJdja :) –