CSS3 애니메이션에서 firefox의 배경 이미지

Question

CSS에서 키 프레임 애니메이션을 만들고 있습니다. -webkit 구문이 지원되므로 애니메이션은 Chrome에서 매우 잘 작동하는 것 같습니다. 알려주세요 제가 FF에서이 작업을 할 알고

@-webkit-keyframes title_toggle 
{ 
from { background-image:url(images/title.png); } 
75%{ background-image:url(images/title_hover.png); } 
to { background-image:url(images/title.png); } 
} 

나는 파이어 폭스를 위해 아래의 코드를했지만, 그는

@-moz-keyframes title_toggle { 
from { background-image:url(images/title.png); } 
75%{ background-image:url(images/title_hover.png); } 
to { background-image:url(images/title.png); } 
} 

작동하지 않습니다.

이것은 CSS 부분입니다.

@-moz-keyframes title_toggle { 
from { background-image:url(images/title.png); } 
75%{ background-image:url(images/title_hover.png); } 
to { background-image:url(images/title.png); } 
} 

.title{ 
    width:40%; 
    height: 30%; 
    position: absolute; 
    top: 10%; 
    left: 5%; 
    background-size: 100% 100%; 
    background-repeat:no-repeat; 
    -webkit-animation-name: title_toggle; 
    -webkit-animation-duration:5s; 
    -webkit-animation-iteration-count:infinite; 
    background-size: 100% 100%; 
    -moz-animation-name: title_toggle; 
    -moz-animation-duration:5s; 
    -moz-animation-iteration-count:infinite; 
} 

가 그리고 이것은 서로 다른 이미지 사이의 크로스 페이드 보간의 부족에 대해 요구하고있는 경우 HTML

<div class="title"></div> 

Answer 1

, 즉 널리 아직 지원되지 않는 스펙에 아주 새로운 추가입니다.

Answer 2

Firefox가 배경 이미지의 애니메이션을 지원하지 않기 때문에 작동하지 않습니다. 배경 이미지는 애니메이션 가능하지 않습니다. Chrome은 자체 구현되어 있지만 Firefox에서 작동시키지 않습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties