CSS3 호환성 문제

Chrome에서 내 CSS3 애니메이션이 Firefox 및 Safari에서 작동하지 않습니다.CSS3 호환성 문제

html { 
    background:#262930 url('./images/pw_maze_black.png') no-repeat left top fixed; 
    background-size:cover; 

    animation:slides 60s; 
    animation-iteration-count: infinite; 
    -moz-animation:slides 60s; 
    -moz-animation-iteration-count: infinite; 
    -webkit-animation:slides 60s; 
    -webkit-animation-iteration-count: infinite; 
    }

을 그리고 이것은 (각 브라우저) 애니메이션 자체이다 : 나는 애니메이션을 실행하기위한이 코드를 사용하고 그것은 내 잘못이나 파이어 폭스와 사파리가

@keyframes slides 
{ 
0% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
6% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
12% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 
18% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 
25% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 
31% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 
37% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 
43% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 
50% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 
56% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 
62% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 
68% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 
75% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 
81% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 
87% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 
93% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 
100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
} 
@-moz-keyframes slides /* Firefox */ 
{ 
0% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
6% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
12% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 
18% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 
25% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 
31% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 
37% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 
43% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 
50% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 
56% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 
62% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 
68% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 
75% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 
81% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 
87% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 
93% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 
100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
} 
@-webkit-keyframes slides /* Safari and Chrome */ 
{ 
0% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
6% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
12% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 
18% {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;} 
25% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 
31% {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;} 
37% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 
43% {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;} 
50% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 
56% {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;} 
62% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 
68% {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;} 
75% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 
81% {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;} 
87% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 
93% {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;} 
100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;} 
}

인가?

편집 : 링크는 파이어 폭스에서 작동하지 않을 수 http://jsfiddle.net/AF4Ce/1/

출처

2013-04-05 Manticore

이유 중 하나는 사전 수정하여 애니메이션의 순서입니다 바이올린합니다. 접두사가없는 버전은 항상 마지막에 넣으십시오. 그러면 브라우저가 항상 해당 버전을 마지막으로 구현할 수 있습니다. 브라우저가 접두어가 붙지 않은 버전으로 이동 한 경우에도 접두사가 붙은 버전에 링크 된 동작이있을 수 있기 때문에 좋습니다.

그러나이 문제를 해결할 수 있을지 모르겠으므로 이것은 답변보다 더 좋습니다. 다른 사람들이 당신이하려는 것을 정확히 볼 수 있도록 코드를 JSFiddle (이미지와 함께)에 넣고 싶을 수도 있습니다.

출처

2013-04-05 16:54:57 Fernker

답장을 보내 주시면 감사하겠습니다. http://jsfiddle.net/AF4Ce/1/ – Manticore

오케이 그래서 나는 바이올린으로 놀아서 FireFox에서 아무 일도 일어나지 않았 음을 확인할 수있었습니다. html 요소에 테두리 색을 추가하고 -moz 키 프레임에서 색을 변경하고 애니메이션을 볼 수있었습니다. 어떤 점이 우리에게 이미지에 이상이 있음을 말해줍니다. 일부 검색 후이 답변을 발견했으며 FF로는 가능하지 않을 수 있습니다. http://stackoverflow.com/questions/12685133/background-image-for-firefox-in-css3-animations 자바 스크립트 폴백이 필요할 수 있습니다. – Fernker

CSS3 호환성 문제

답변

관련 문제