與關鍵幀的圖像轉換

Question

嘿傢伙我目前正在用css3關鍵幀構建一個圖像顯示（小），它正在工作，但只在Firefox上以某種方式，我似乎無法解決這個問題:(它應該工作在鉻Firefox和Safari，但最新版本的它目前只在Firefox的工作。

任何人都可以，可以幫助？

這裏是一個要在人的工作上面的瀏覽器的CSS。

@keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

.case-image { 
    position:relative; 
    height:auto; 
    width:32%; 
} 
.case-image img { 
    position:absolute; 
    width:    100%; 
    height:    auto; 
    left:0; 
border:       3px solid #f8d206; 
    -moz-border-radius:     15px; 
    border-radius:      15px; 
    margin-left:      -3px; 
    margin-right:      -3px; 

} 

.case-image img { 
    -webkit-animation-name: cf4FadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 

    -moz-animation-name: cf4FadeInOut; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-duration: 8s; 

    -o-animation-name: cf4FadeInOut; 
    -o-animation-timing-function: ease-in-out; 
    -o-animation-iteration-count: infinite; 
    -o-animation-duration: 8s; 

    animation-name: cf4FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
} 
.case-image img:nth-of-type(1) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    animation-delay: 6s; 
} 
.case-image img:nth-of-type(2) { 
    -webkit-animation-delay: 4s; 
    -moz-animation-delay: 4s; 
    -o-animation-delay: 4s; 
    animation-delay: 4s; 
} 
.case-image img:nth-of-type(3) { 
    -webkit-animation-delay: 2s; 
    -moz-animation-delay: 2s; 
    -o-animation-delay: 2s; 
    animation-delay: 2s; 
} 
.case-image img:nth-of-type(4) { 
    -webkit-animation-delay: 0; 
    -moz-animation-delay: 0; 
    -o-animation-delay: 0; 
    animation-delay: 0; 
} 

Answer 1

你需要包含關鍵幀的供應商前綴爲r的例子：http://jsfiddle.net/tjfogarty/Gzxkq/

@keyframes pulse { 
    0% { width: 40px; height: 40px; } 
    100% { width: 50px; height: 50px; } 
} 

@-webkit-keyframes pulse { 
    0% { width: 40px; height: 40px; } 
    100% { width: 50px; height: 50px; } 
} 

@-moz-keyframes pulse { 
    0% { width: 40px; height: 40px; } 
    100% { width: 50px; height: 50px; } 
} 

等...

您也可以使用這樣的事情：http://leaverou.github.com/prefixfree/照顧它。