이 CSS 코드가 Chrome에서만 작동하는 이유는 무엇입니까?

this page 코드가 Chrome에서만 작동하는 이유는 누구에게 말해 줄 수 있습니까? 이 CSS 코드가 Chrome에서만 작동하는 이유는 무엇입니까?

는 (내가 좀 더 세부 사항을 추가하도록 요청하고있어하지만 난 정말 생각할 수 없다 ...) 난 단지 배경 색상보다는 이미지를 사용하는 경우

모든 브라우저에서 작동하는 것 같다. 이미지가 아직 애니메이션에 포함되지 않았습니까?

<!DOCTYPE html> 
<html> 
<head> 
<style> 

div.slideshow 
{ 
width:957px; 
height:310px; 
margin:0; 
padding:0; 
border:0; 
border-collapse:collapse; 
background-image:url('about.jpg'); 
position:relative; 
animation-name:myfirst; 
animation-duration:60s; 
animation-timing-function:cubic-bezier(0.5,0,0.5,1); 
animation-delay:5s; 
animation-iteration-count:infinite; 
animation-direction:normal; 
animation-play-state:running; 

/* Safari and Chrome: */ 
-webkit-animation-name:myfirst; 
-webkit-animation-duration:60s; 
-webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1); 
-webkit-animation-delay:5s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-direction:normal; 
-webkit-animation-play-state:running; 
} 

@keyframes myfirst 
{ 
0% {background-image:url('about.jpg');} 
25% {background-image:url('exhibitions.jpg');} 
50% {background-image:url('exhibitions2.jpg');} 
75% {background-image:url('medical.jpg');} 
100% {background-image:url('about.jpg');} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {background-image:url('about.jpg');} 
25% {background-image:url('exhibitions.jpg');} 
50% {background-image:url('exhibitions2.jpg');} 
75% {background-image:url('medical.jpg');} 
100% {background-image:url('about.jpg');} 
} 

</style> 
</head> 
<body> 

<div class="slideshow"></div> 


</body> 
</html>

출처

2013-12-16 Rolf

웹킷 브라우저 만 타겟팅하기 때문입니다. –

@Bondye는 Firefox와 IE에서 접두어로 작동하지 않습니다. –

"(더 자세한 내용을 추가 할 것을 요청 받았지만 어떤 것도 생각할 수는 없습니다 ...)"음, "작품"에 대한 정의가 도움이 될 것입니다. Safari의 사이트와 Chrome의 내 사이트 사이에는 아무런 차이가 없으므로 사용자가 궁금한 것이 무엇인지 알 수 없습니다. –

당신은 moz 및 o 접두사를 추가하거나 접두사 - 무료 라이브러리를 얻고 접두사를 해결하기 위해 webkit 부분을 제거해야 하나. background-images은 색상만큼 애니메이션 가능해야하지만 잘못 될 수 있습니다.

출처

2013-12-16 14:42:13 Ian

moz와 o 접두사를 추가했지만 아무런 도움이되지 않습니다. Chrome에서만 애니메이션을 표시합니다. :-( – Rolf

모든 도움을 주셔서 감사합니다. 나는 그 문제를 거의 핥았다고 생각합니다. [결과는 다음과 같습니다] (http://www.sytemaker.com/development/css-bits/slideshow-c.html). Opera에도 여전히 표시되지 않습니다 ... – Rolf

이 CSS 코드가 Chrome에서만 작동하는 이유는 무엇입니까?

답변

관련 문제